两个下拉内的文本字段

Question

该脚本生成一个下拉表单，我可以选择可以显示的下拉字段的数量。不过，我有点卡住了。我现在的问题是如何使默认文本字段基于第二个下拉表单的值？例如，如果我选择'女士'它将产生两个文本字段，否则它将只有一个文本字段。

jQuery的

$(document).ready(function() { 
    $('#bookinfo_adult').change(function() { 
     var num = $('#bookinfo_adult').val(); 
     var i = 0; 
     var html = ''; 
     for (i = 1; i <= num; i++) { 
      html += '<br>' + i + '. <select name="gender4-' + i + '">' + '</' + 'option>' + '<option value=' + '"m">Mr. ' + '</option' + '>' + '<option value=' + '"f">' + 'Ms. ' + '</option' + '>' + '</select' + '></br>'; 
     } 
     $('#list').html(html); 
    }); 
});​ 

HTML

<select id="bookinfo_adult" name="bookinfo_adult"> 
     <option value="0">- SELECT -</option> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
     <option value="4">4</option> 
     <option value="5">5</option> 
     <option value="6">6</option> 
    </select> 
<div id="list"></div> 

Answer 1

不太清楚你问什么，但我猜你要动态地根据当前选择，以显示输入字段中输入您生成select元素？

那么这个怎么样？

HTML：

<input type="text" id="bookinfo_adult"> 
<div id="list"></div> 

CSS：

#list input { display: none; } 

JS：

$(document).ready(function() { 
    $('#bookinfo_adult').change(function() { 
     var num = $('#bookinfo_adult').val(), i = 0, html = ''; 
     for (i = 1; i <= num; i++) { 
      html += '<div>' + i + '. \ 
         <select name="gender4-'+i+'"><option/><option value="m">Mr.</option><option value="f">Ms.</option><select> \ 
         <input type="text" class="ms"> <input type="text" class="mr">\ 
        </div>'; 
     } 
     $('#list').html(html); 
    }); 
    $(document).on("change", "#list select", function(){ 
     var parent = $(this).closest("div"); 
     switch ($(this).val()) { 
      case "m": parent.find(".mr").show(); parent.find(".ms").hide(); break; 
      case "f": parent.find("input").show(); break; 
      default: parent.find("input").hide(); break; 
     } 
    }); 
}); 

我只是增加了两个文本字段（隐藏w ^首先使用CSS），并将div中的每个“下拉列表中的”行“包装起来以便于选择。然后创建一个onchange处理函数，该函数处理函数用于将来添加到DOM的所有元素（一旦您可以使用jQuery.live()，但从版本1.7开始不推荐使用）。处理程序本身应该是不言自明的。 ;）

工作示例：http://jsfiddle.net/DfXEE/