Resetting other select boxes when any one is selected

1 Views

Resetting all other select menus when any one is selected (jQuery and WordPress)

I need all other select menus to be reset (without hitting submit) when any one is selected. Here is an example with just two menus but I will probably need it to work with four. (select one, other three are reset to default values)

Read More

Example menu 1 : 

    <select name="jj_register_options[number]" id="jj_register_options[number]">
    <option value="">Front Page</option>
    <option class="level-0" value="1115">Cart</option>
    <option class="level-0" value="1143">Checkout</option>
    <option class="level-1" value="1148">&nbsp;&nbsp;&nbsp;Checkout → Pay</option>
    <option class="level-1" value="1149">&nbsp;&nbsp;&nbsp;Order Received</option>
    <option class="level-0" value="1009">Checkout</option>
    <option class="level-0" value="1116">Image Store</option>
    <option class="level-0" value="971">Logout</option>
    <option class="level-0" value="967">Lost Password</option>
    <option class="level-0" value="1042">Members</option>
    <option class="level-0" value="1144">My Account</option>
</select>

Example menu 2 

<select name="jj_register_options[categories]" id="jj_register_options[categories]" class="">
    <option class="level-0" value="1">Uncategorized&nbsp;&nbsp;(0)</option>
    <option class="level-0" value="5">testy test&nbsp;&nbsp;(1)</option>
    <option class="level-0" value="7">Help &amp; Support&nbsp;&nbsp;(1)</option>
    <option class="level-0" value="8">Themes&nbsp;&nbsp;(0)</option>
    <option class="level-0" value="24">Entertainment&nbsp;&nbsp;(1)</option>
    <option class="level-0" value="28">Lifestyle&nbsp;&nbsp;(1)</option>
</select>

When one is clicked the other needs to reset.

I have this code but it is not working. 

$('#jj_register_options[number]').change(function(){
    $('#jj_register_options[categories]').prop('selectedIndex',0);
});

$('#jj_register_options[categories]').change(function(){
    $('#jj_register_options[number]').prop('selectedIndex',0);
});

Any help would be appreciated. I am good with PHP, but have almost no jQuery / javascript knowledge,

Post Views: 1

Related posts

Leave a Reply

3 comments

  1. jQuery uses [ and ] for attribute selectors, your selector selects an element with ID of jj_register_options that has categories attribute. Escape them or use different identifiers. the .prop() method will work as it is if you are using jQuery 1.6+.

    (function($) {
   $(function() {
      $('#jj_register_options\[categories\]').on('change', function() {
          // ...
      }); 
   });
})(jQuery);

  2. Thanks to brasofilo and Harke for the answer.
    PLease see the jquery code used for reference. This was used in conjunction with three separate select boxes with ids ‘jj_register_cats’ , ‘jj_register_tag’ and ‘jj_register_page’. Note I have included jQuery rather than $ as this is how wordpress likes it;-) Thanks again. 

    jQuery(document).ready(function(jQuery) {   
jQuery('#jj_register_page').change(function(){
    jQuery('#jj_register_cats').prop('selectedIndex',0);
    jQuery('#jj_register_tag').prop('selectedIndex',0);
});

jQuery('#jj_register_cats').change(function(){
    jQuery('#jj_register_page').prop('selectedIndex',0);
    jQuery('#jj_register_tag').prop('selectedIndex',0);
});

jQuery('#jj_register_tag').change(function(){
    jQuery('#jj_register_page').prop('selectedIndex',0);
    jQuery('#jj_register_cats').prop('selectedIndex',0);
});

    });

  3. The id doesn’t have to follow the option[key] format, as the form processing is based on name not id.

    <select name="jj_register_options[number]" id="jj_number">
<select name="jj_register_options[categories]" id="jj_categories" class="">

    It’s easier and cleaner to target them this way.

    jQuery(document).ready(function($) {   
    $('#jj_number').change(function(){
        $('#jj_categories').prop('selectedIndex',0);
    });

    $('#jj_categories').change(function(){
        $('#jj_number').prop('selectedIndex',0);
    });
});