下拉onchange新字段

我想要一个下拉菜单，当用户选择一个特定的值，它可以产生一个额外的输入框或复选框或任何其他类型的输入。每个值都可以显示不同的结果，或者根本不显示。当这些值发生变化时，选项也会变化。下拉onchange新字段

任何人有一个建议或链接，我可以阅读？

编辑

这里还挺明白我的意思的情况下，上述没有意义。

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

来源

2011-09-21 john

你可以这样说：

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

来源

2011-09-21 22:27:34

原来这是更好的解决方案。我需要2个下拉框和上面的冲突。您的更新非常流畅，谢谢！ – john

你的意思是这样的吗？

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

来源

2014-05-24 11:56:32 Krzysiek

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

来源

2014-05-24 12:11:56 BurakBaskak

下拉onchange新字段

回答

相关问题