テキストボックスにフォーム値を追加します。

Question

ドロップダウンボックスで選択した値をJQueryを使用してページの別のテキストボックスに追加しようとしています。

は、このフォームから

<form id="val"> 
<select> 
<option value="Counseling General CBI Determinations">CBI Determinations</option> 
<option value="Counseling General Correspondence">Correspondence</option> 
<option value="Counseling General Memorandum">Memorandum</option> 
</select> 
<button type="button" id="append">apply filter</button> 
</form> 

追加あなたのhtmlを修正する必要がある最初の事

<input name="txtBox" type="text"/> 

Answer 1

このテキストボックスに値を取る、オプションは、select の内側にする必要がありますボタンのクリックイベントハンドラで行うことができます。このあなたはjqueryのを使用することができますが行われた後

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
<form id="val"> 
    <select id="selectBox"> 
     <option value="Counseling General CBI Determinations">CBI Determinations</option> 
     <option value="Counseling General Correspondence">Correspondence</option> 
     <option value="Counseling General Memorandum">Memorandum</option> 
    </select> 
<button type="button" id="append">apply filter</button> 
</form> 
Append to this textbox 

<input name="txtBox" type="text"/> 

を：あなたは確認してくださいので、あなたのHTMLは読みくださいをした後、選択のあなたのオプション要素を配置する必要があり

$('#append').click(function() { 
 
    var selectedVal = $('#mySelect').val(); 
 
    $('input[name="txtBox"]').val(selectedVal); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<form id="val"> 
 
    <select name="mySelect" id="mySelect"> 
 
     <option value="Counseling General CBI Determinations">CBI Determinations</option> 
 
     <option value="Counseling General Correspondence">Correspondence</option> 
 
     <option value="Counseling General Memorandum">Memorandum</option> 
 
    </select> 
 
<button type="button" id="append">apply filter</button> 
 
</form> 
 
Append to this textbox 
 

 
<input name="txtBox" type="text"/>

Answer 2

：

$('input[name="txtBox"]').val($("#selectBox").val());