Question

我在另一个线程中找到了以下代码来创建一个Jquery下拉菜单：

$(document).ready(function() {
   $('#myselector').change(function(){
      $('.statecontent').hide();
      $('#' + $(this).val()).show();    
   });
});

HTML看起来像这样

<select id="myselector">
   <option value="state1">State 1</option>
   <option value="state2">State 2 </option>
   <option value="state3">State 3</option>
</select>

<div id="state1" class="statecontent">State1 Specific Page Content Goes here</div>
<div id="state2" class="statecontent">State2 Specific Page Content Goes here</div>
<div id="state3" class="statecontent">State3 Specific Page Content Goes here</div>

除了一个问题之外，这很好用：当页面加载时，它会显示所有三个选项的文本。但是，一旦选择了选项，其他文本就会消失，只显示相关文本。为什么加载所有三个选项的文本？如何修复它，以便在用户选择其他选项之前仅显示第一个选项的文本？在此先感谢您的帮助。

Answer 1

$(document).ready(function() {
  // this is for the case an option comes selected from server
  showRelatedDiv();

   $('#myselector').change(function(){
       showRelatedDiv();
   });
});

function showRelatedDiv(){
   $('.statecontent').hide();
   $('#' + $('#myselector').val()).show();        
}

Answer 2

只需在页面加载时触发更改事件，如下所示：

$(function() {
   $('#myselector').on('change', function(){
      $('#' + this.value).show().siblings('.statecontent').hide();    
   }).change();
});

FIDDLE

Answer 3

你可以试试这个：

$(document).ready(function() {

   $('.statecontent').hide();
   $('#' + $('#myselector').val()).show();
   $('#myselector').change(function(){
      $('.statecontent').hide();
      $('#' + $(this).val()).show();    
   });
});

这是工作fiddle

Answer 4

加载页面后，您需要执行一些处理。您的过滤仅在发生更改事件时启动。

$(document).ready(function() {
   //Hide all states on load
   $('.statecontent').hide();
   //Determine which state is selected and show
   $('#' + $('#myselector').val()).show();

   //Bind the change event.
   $('#myselector').change(function(){
      $('.statecontent').hide();
      $('#' + $(this).val()).show();    
   });
});

工作示例：http://jsfiddle.net/7cEXZ/

Jquery下拉列表没有选择性地加载内容

4 个答案: