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

你可以这样做：

$("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，您可以选择n个选项，无需更改脚本。

Answer 2

您可以使用该代码。示例在这里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 3

你的意思是什么？

<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>

下载更新新字段

3 个答案: