Two <select multiple>s with duplicate <option>s

  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13503
  • Loc: Florida

Post 3+ Months Ago

I'm managing electrical relays. The relays can have "open" and "closed" states. When setting up a new relay I use two <select multiple> HTML elements with duplicate options for "open dependencies" and "closed dependencies".

A relay can not be both open and closed. When I select an option in one of the <select> elements, the corresponding option in the other element should be disabled, and if it's previously been selected it should be de-selected to ensure any browser quirks can't cause inconsistencies in the program.

I'm thinking I should watch the onchange event of both <select> elements and toggle the disabled/selected states, and the application has jQuery available, but it's been awhile since I've worked with dynamic forms, so I'm curious if there's anything new to handle my issue today.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Zealous
  • Guru
  • Guru
  • User avatar
  • Posts: 1244
  • Loc: Sydney

Post 3+ Months Ago

can we get some code sample to read over?

or

Developer Duck it
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13503
  • Loc: Florida

Post 3+ Months Ago

Code: [ Select ]
    <legend>Dependencies (open)</legend>
    <select name="dependencies_open[]" multiple="true">
        <?php echo relay::dependency_options(); ?>
    </select>

    <legend>Dependencies (closed)</legend>
    <select name="dependencies_closed[]" multiple="true">
        <?php echo relay::dependency_options(); ?>
    </select>
  1.     <legend>Dependencies (open)</legend>
  2.     <select name="dependencies_open[]" multiple="true">
  3.         <?php echo relay::dependency_options(); ?>
  4.     </select>
  5.     <legend>Dependencies (closed)</legend>
  6.     <select name="dependencies_closed[]" multiple="true">
  7.         <?php echo relay::dependency_options(); ?>
  8.     </select>


When someone selects an item in dependencies_closed[], it should disable and de-select the same option in dependencies_open[], and vice-versa.

When someone de-selects an option in either, it should re-enable, but not re-select the same option in the other.

// Edit -- This appears to work, utilizing jQuery.

Code: [ Select ]
$('select[name^=dependencies_open], select[name^=dependencies_closed]').change(function(){
    var
        change        = $('select[name^=dependencies_' + ($(this).attr('name').indexOf('open') == -1 ? 'open' : 'closed') + ']'),
        selected    = $(this).val() || [];

    change.find('option').removeAttr('disabled');

    if(selected.length > 0)
    {
        change.find('option[value=' + selected.join('], option[value=') + ']').attr('disabled', true);
    }
});
  1. $('select[name^=dependencies_open], select[name^=dependencies_closed]').change(function(){
  2.     var
  3.         change        = $('select[name^=dependencies_' + ($(this).attr('name').indexOf('open') == -1 ? 'open' : 'closed') + ']'),
  4.         selected    = $(this).val() || [];
  5.     change.find('option').removeAttr('disabled');
  6.     if(selected.length > 0)
  7.     {
  8.         change.find('option[value=' + selected.join('], option[value=') + ']').attr('disabled', true);
  9.     }
  10. });
  • Zealous
  • Guru
  • Guru
  • User avatar
  • Posts: 1244
  • Loc: Sydney

Post 3+ Months Ago

Quote:
// Edit -- This appears to work, utilizing jQuery.


Did u get it working?
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13503
  • Loc: Florida

Post 3+ Months Ago

Yeppers.

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: No registered users and 85 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.