将表单值附加到文本框

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