Question

选择任何一个菜单时重置所有其他选择菜单（jQuery和Wordpress）

当选择任何一个菜单时，我需要重置所有其他选择菜单（不要点击提交）。这是一个只有两个菜单的例子，但我可能需要它与四个一起工作。（选择一个，其他三个重置为默认值）

示例菜单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>

示例菜单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>

点击一个时，另一个需要重置。

我有这段代码，但它无效。

$('#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);
});

任何帮助将不胜感激。我很擅长PHP，但几乎没有jQuery / javascript知识，

Answer 1

jQuery使用[和]作为属性选择器，您的选择器会选择ID为jj_register_options但具有categories属性的元素。逃避它们或使用不同的标识符。如果您使用的是jQuery 1.6 +，.prop()方法将正常工作。

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

Answer 2

感谢brasofilo和Harke的答案。请参阅用于参考的jquery代码。这与三个单独的选择框一起使用，其中包含ids'jj_register_cats'，'jj_register_tag'和'jj_register_page'。注意我已经包含了jQuery而不是$，因为这是wordpress喜欢它的方式;-)再次感谢。

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);
});

}）;

Answer 3

id不必遵循option[key]格式，因为表单处理基于name而不是id。

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

以这种方式瞄准它们会更容易和更清洁。

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

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

选择任何一个时，重置其他选择框

3 个答案: