下拉onchange新字段

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

你的意思是這樣的嗎？

<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

您可以使用該代碼。示例在這裏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;   
    } 
})