drop down onchange new fields

I'm trying to have a dropdown menu that when the user chooses a specific value, it can produce an additional input box or checkbox or any other type of input. each value could can show different results, or none at all. and when the values change, so do the options.

Anyone have a suggestion or link i can read?

EDIT

Here kinda what I mean in case the above made no sense.

&开发者_如何转开发lt;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>

---

You can do it like this:

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

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

Take a look at this jsfiddle for working example: http://jsfiddle.net/v7yHU/

Updated to be more elegant and detach your html from logic. 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();
    });
});

Working sample: http://jsfiddle.net/v7yHU/3/

With this js you can have n options in select, no need to change script.

---

You can use that code. Example is here 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;           
    }
 })

---

Do you mean something like that?

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

Better way:

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