выпадающий onchange новые поля

Question

Я пытаюсь иметь выпадающее меню, которое, когда пользователь выбирает определенное значение, может создать дополнительное поле ввода или флажок или любой другой тип ввода. каждое значение может показывать разные результаты или вообще не показывать. и когда значения изменяются, изменяются и параметры.

У кого-нибудь есть предложение или ссылка, которую я могу прочитать?

EDIT

Вот что я имею в виду, если вышесказанное не имело смысла.

<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

Вы можете сделать это следующим образом:

$("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 опций в select, не нужно менять скрипт.

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>