將表單值附加到文本框

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> 

追加到該文本框

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

Answer 1

你需要修復你的HTML第一件事就是選擇必須是select 然後裏面您可以在按鈕的單擊事件處理程序中執行此操作。

$('#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

你需要確保，把在選擇你的選項元素成就了後讓你的HTML應該閱讀：

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

已經做到了這一點，你可以使用jQuery後：

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