使用javascript將下拉值傳遞給文本框

Question

我對 javascript 了解不多，不幸的是在這個項目到期之前沒有時間學習（希望我這樣做了！）。 我認為可以在提交表單之前將下拉選擇的值傳遞到表單上的隱藏文本輸入字段中。 誰能幫我弄清楚如何用javascript做到這一點？ 謝謝！ 這是我的下拉和文本框詳細信息：

<div class="formEntryArea">
<div class="formEntryLabel">
    <span class="formLabel"><label for=" langdropdown">Would you like to receive library notices in English or Spanish? ><span class="formRequired">*</span></label></span>
</div>
    <div class="formMultiSelect" id=”langdropdown”>
<select name=" langdropdown ">
<option value="0" selected="selected">Choose language</option>
<option value="eng">English</option>
<option value="spa">Spanish</option>
<input type="text" id="ddepartment" name="ddepartment"  value=””>
</select>
</div>

Answer 1

這簡直了。 首先，您必須為您的select綁定一個change事件處理程序。 然后，您必須使用從dropdown選擇的value設置input文本。

 var select=document.getElementsByTagName('select')[0]; var input=document.getElementById('ddepartment'); select.onchange=function(){ input.value=select.options[select.selectedIndex].text; }

 <div class="formEntryArea"> <div class="formEntryLabel"> <span class="formLabel"><label for=" langdropdown">Would you like to receive library notices in English or Spanish? ><span class="formRequired">*</span></label></span> </div> <div class="formMultiSelect" id=”langdropdown”> <select name=" langdropdown "> <option value="0" selected="selected">Choose language</option> <option value="eng">English</option> <option value="spa">Spanish</option> </select> <input type="text" id="ddepartment" name="ddepartment"> </div>

Answer 2

您可以使用此代碼：

var myselect = document.getElementById("MySelect");
myselect.onchange = function(){
    alert(myselect.options[myselect.selectedIndex].value);
    document.getElementById("ddepartment").value = myselect.options[myselect.selectedIndex].value;
};

結果： https : //jsfiddle.net/fh5myefw/

Answer 3

注意關閉標簽，這是更好的做法。

 var select = document.getElementById('selectElem'); var outputElem = document.getElementById('ddepartment'); select.addEventListener('change',function(){ var newValue = !this.selectedIndex ? "":this.options[this.selectedIndex].text; outputElem.value = newValue; });

 <select name="langdropdown" id="selectElem" required> <option value="" selected="selected">Choose language</option> <option value="eng">English</option> <option value="spa">Spanish</option> </select> <input type="text" id="ddepartment" name="ddepartment" value="">

Answer 4

這是javascript函數

function func(selectObject) { document.getElementById('ddepartment').value = selectObject.value; }

添加 onchange 事件來選擇這樣的元素

<select name="langdropdown" onchange="func(this)">

Answer 5

這里使用這個：

var sel = document.getElementById('lang');

sel.onchange = function() {
  var val = this.options[this.selectedIndex].value;
  var che = document.getElementById('cache').value;
  che = val;
  console.log(che);
}

片段

 var sel = document.getElementById('lang'); sel.onchange = function() { var val = this.options[this.selectedIndex].value; var che = document.getElementById('cache').value; che = val; console.log(che); }

 <select id='lang' name="lang"> <option value="" selected>Choose language</option> <option value="eng">English</option> <option value="spa">Spanish</option> <option value="jpn">Japanese</option> <option value="zho">Chinese</option> <option value="fin">Finnish</option> <option value="nav">Navajo</option> </select> <input type="hidden" id="cache" name="cache" value=””>