드롭 다운 새로운 필드를 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> 

자바 스크립트 :

$(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/

당신이 가질 수있는 N 선택의 옵션이 필요 스크립트를 변경하지하는 JS.

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;   
    } 
})