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

  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Joined: Feb 10, 2004
  • Posts: 13455
  • Loc: Florida
  • Status: Offline

Post August 18th, 2012, 7:50 am

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.
Strong with this one, the sudo is.
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post August 18th, 2012, 7:50 am

  • Zealous
  • Guru
  • Guru
  • User avatar
  • Joined: Apr 15, 2011
  • Posts: 1195
  • Loc: Sydney
  • Status: Offline

Post August 18th, 2012, 5:40 pm

can we get some code sample to read over?

or

Developer Duck it
  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Joined: Feb 10, 2004
  • Posts: 13455
  • Loc: Florida
  • Status: Offline

Post August 18th, 2012, 6:15 pm

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. });
Strong with this one, the sudo is.
  • Zealous
  • Guru
  • Guru
  • User avatar
  • Joined: Apr 15, 2011
  • Posts: 1195
  • Loc: Sydney
  • Status: Offline

Post August 18th, 2012, 10:06 pm

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


Did u get it working?
  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Joined: Feb 10, 2004
  • Posts: 13455
  • Loc: Florida
  • Status: Offline

Post August 18th, 2012, 10:29 pm

Yeppers.
Strong with this one, the sudo is.

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: No registered users and 249 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
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.