2

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

I need all other select menus to be reset (without hitting submit) when any one is selected. 这是一个只有两个菜单的示例，但我可能需要它与四个菜单一起使用。（选择一项，其他三项重置为默认值）

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

4

3 回答 3

1

jQuery 使用[and]对于属性选择器，您的选择器选择一个 ID 为jj_register_options具有categories属性的元素。转义它们或使用不同的标识符。如果您使用的是 jQuery 1.6+，该.prop()方法将按原样工作。

(function($) {
   $(function() {
      $('#jj_register_options\\[categories\\]').on('change', function() {
          // ...
      }); 
   });
})(jQuery);
于 2013-09-08T13:42:51.967 回答
1

感谢 brasofilo 和 Harke 的回答。请参阅用于参考的 jquery 代码。这与 ID 为“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);
});

});

于 2013-09-08T17:14:09.100 回答
0

id不必遵循option[key]格式，因为表单处理基于namenot 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);
    });
});
于 2013-09-08T13:54:22.807 回答