jquery更改/切换？

Question

我们希望创建一个表单，当在选择框中选择一个选项时，选项会在另一个选择框中更改，具体取决于所选的选项。

例子：

Select box 1 
Option A 
Option B 

Select box 2 
Options change depending on if A or B is chosen 

我们怎样才能做到这一点？

Answer 1

有几种方法，具体取决于您是否希望通过Ajax调用第二个选择框中的选项，或者是否存在两种可能性。

HTML

<select id="select1"> 
    <option value="a">a</option> 
    <option value="b">b</option> 
</select> 

<select id="select2a" style="display:none;"> 
    <!-- options --> 
</select> 

<select id="select2b" style="display:none;"> 
    <!-- options --> 
</select> 

jQuery的

$('#select1').change(function(){ 

    if($(this).val() == "a"){ 

     $('#select2a').show(); 
     $('#select2b').hide();  

    }elseif($(this).val() == "b"){ 

     $('#select2a').hide(); 
     $('#select2b').show(); 

    } 

}); 

如果你不想使用两个单独的selectboxes，你可以存储变量中的选项和改变的的.html()选择框取决于在第一个选择框中选择的选项。

Answer 2

从jQuery文档：

http://api.jquery.com/selected-selector/

$("select").change(function() { 
     var str = ""; 
     //example from the docs - put code here which is specific to your use case. 
     $("select option:selected").each(function() { 
      str += $(this).text() + " "; 
      }); 
     $("div").text(str); 
    }) 
    .trigger('change'); 

Answer 3

下面是描述和实现与选择输入和jQuery一些条件逻辑短博客条目：

• Select Menus and Conditional Logic with jQuery