下拉更改新字段

Question

我试图有一个下拉菜单，当用户选择一个特定的值时，它可以产生一个额外的输入框或复选框或任何其他类型的输入。每个值都可以显示不同的结果，或者根本没有。当值改变时，选项也会改变。

任何人有我可以阅读的建议或链接？

编辑

如果以上没有意义，我的意思是这样。

<select name="type" onchange="jqueryfunction('pass_selected_option')">
  <option value="fooa">Add 2 Texboxes</option>
  <option value="foob">Add 3 radios</option>
  <option value="fooc">add 2 checkboxes and 2 textboxes</option>
</select>

Answer 1

您可以使用该代码。例子在这里jsFiddle

//HTML side
       <div>
        <select id="mySelect">
            <option value="fooa">Add 2 Texboxes</option>
             <option value="foob">Add 3 radios</option>
             <option value="fooc">add 2 checkboxes and 2 textboxes</option>
        </select>

    </div>
    <div id="divGeneratedElements"></div>

 // Javascript side
$("#mySelect").change(function(){
    switch($(this).val()){
        case "fooa": 
            $("#divGeneratedElements").html("<input type='text' value='TextField 1' /><input type='text' value='TextField 2' />"); break;
        case "foob": 
            $("#divGeneratedElements").html("<input type='radio' name='a'/> radio 1 <input type='radio'name='a' />radio 2<input type='radio'name='a'/>radio 3 "); break;
        case "fooc":
            $("#divGeneratedElements").html("<input type='text' value='TextField 1' /><input type='text' value='TextField 2' /> <input type='checkbox' />checkbox 1<input type='checkbox'/>checkbox 2 "); break;           
    }
 })

Answer 2

你是这个意思吗？

<script type="text/javascript">
function jqueryfunction(el){
    var value = el.value;
    //var value = $(el).val();
}
</script>

<select name="type" onchange="jqueryfunction(this)">
  <option value="fooa">Add 2 Texboxes</option>
  <option value="foob">Add 3 radios</option>
  <option value="fooc">add 2 checkboxes and 2 textboxes</option>
</select>

更好的方法：

<script type="text/javascript">
jQuery(function($){
    $('#someselect').change(function(){
        var $this = $(this);

        switch($this.val()){
            case 'fooa':
                alert('FooA!');
                break;
            case 'foob':
                alert('something!');
                break;
        }
    });
});
</script>

<select id="someselect" name="type">
  <option value="fooa">Add 2 Texboxes</option>
  <option value="foob">Add 3 radios</option>
  <option value="fooc">add 2 checkboxes and 2 textboxes</option>
</select>

Answer 3

你可以这样做：

$("select#type").change(function(){
    var value = $(this).val();

    $("div#target").append('<input type="textbox" value='+value+'/>');
});

看看这个 jsfiddle 的工作示例：http://jsfiddle.net/v7yHU/

更新更优雅，并将您的 html 从逻辑中分离出来。 HTML：

<select name="type" id="type" >
  <option >Select a value...</option>
  <option value="fooa">Add 2 Texboxes</option>
  <option value="foob">Add 3 radios</option>
  <option value="fooc">add 2 checkboxes and 2 textboxes</option>
</select>

<div id="target">
   <div id="fooa">
       <input type="textbox" value="tb1"/>
       <input type="textbox" value="tb2"/>
    </div>
   <div id="foob">
       <input type="radio" value="rb1"/>
       <input type="radio" value="rb2"/>
       <input type="radio" value="rb3"/>
    </div>
   <div id="fooc">
       <input type="textbox" value="tb1"/>
       <input type="textbox" value="tb2"/>
       <input type="checkbox" value="cb1"/>
       <input type="checkbox" value="cb2"/>
    </div>
</div>

JavaScript：

$(document).ready(function(){
    //hide all in target div
    $("div", "div#target").hide();
    $("select#type").change(function(){
        // hide previously shown in target div
        $("div", "div#target").hide();

        // read id from your select
        var value = $(this).val();

        // show rlrment with selected id
        $("div#"+value).show();
    });
});

工作样本：http://jsfiddle.net/v7yHU/3/

有了这个js，你可以在select中有n个选项，不需要改变脚本。