如何在输入文本框中显示选定的值
我在上面的代码中使用了两个选择下拉菜单，并为两者都设置了值，并且需要显示两个地方不同的内容。请帮助我如何获得正确的结果，如果它显示为 div 或输入或按钮格式，我可以接受。
<input type="button" class="btn btn-sm btn-w1" name="txtval" id="txtval" onClick="checkVal()">
<select class="lbbg selsm-2 inblock-2 " name="rupeeitems" id="rupeeitems">
<option value="">Select</option>
<option value="RUB Dollar">RUB</option>
<option value="AFN Dinaar">AFN</option>
<option value="EUR Dollar">EUR</option>
</select>
<script>
var select = document.getElementById('rupeeitems');
var input = document.getElementById('txtval');
select.onchange = function () {
input.value = select.value;
}
</script>
<!-- This one is working properly -->
<input type="button" class="btn btn-sm btn-w1" name="txtprice" id="txtprice" onClick="checkPrice()">
<select class="lbbg selsm-2 inblock-2 " name="cmbitems" id="cmbitems">
<option value="">Select</option>
<option value="USD Dollar">USD</option>
<option value="Euro Dollar">EUR</option>
<option value="Aud Dollar">AUD</option>
<option value="Bahrien ">BHD</option>
</select>
<script>
var select = document.getElementById('cmbitems');
var input = document.getElementById('txtprice');
select.onchange = function () {
input.value = select.value;
}
</script>
弑天下3回答
-
泛舟湖上清波郎朗
您应该对变量名称更加具体。此外，您可以使用this关键字来引用函数内的当前选择元素。不确定为什么要使用内联事件处理程序：<input type="button" class="btn btn-sm btn-w1" name="txtval" id="txtval"><select class="lbbg selsm-2 inblock-2 " name="rupeeitems" id="rupeeitems"> <option value="">Select</option> <option value="RUB Dollar">RUB</option> <option value="AFN Dinaar">AFN</option> <option value="EUR Dollar">EUR</option></select><!-- This one is working properly --><input type="button" class="btn btn-sm btn-w1" name="txtprice" id="txtprice"><select class="lbbg selsm-2 inblock-2 " name="cmbitems" id="cmbitems"> <option value="">Select</option> <option value="USD Dollar">USD</option> <option value="Euro Dollar">EUR</option> <option value="Aud Dollar">AUD</option> <option value="Bahrien ">BHD</option></select><script> var selectRupee = document.getElementById('rupeeitems'); var inputRupee = document.getElementById('txtval'); selectRupee.onchange = function() { inputRupee.value = this.value; } var selectCmb = document.getElementById('cmbitems'); var inputCmb = document.getElementById('txtprice'); selectCmb.onchange = function() { inputCmb.value = this.value; }</script> -
回首忆惘然
Lupu 之前在commets 中提到的，最好将所有js 代码写入<script>页面末尾标签之前的一个标签内<body>。这段代码正在运行：<input type="button" class="btn btn-sm btn-w1" name="txtval" id="txtval" onClick="checkVal()"><select class="lbbg selsm-2 inblock-2 " name="rupeeitems" id="rupeeitems"> <option value="">Select</option> <option value="RUB Dollar">RUB</option> <option value="AFN Dinaar">AFN</option> <option value="EUR Dollar">EUR</option></select><!-- This one is working properly --><input type="button" class="btn btn-sm btn-w1" name="txtprice" id="txtprice" onClick="checkPrice()"><select class="lbbg selsm-2 inblock-2 " name="cmbitems" id="cmbitems"> <option value="">Select</option> <option value="USD Dollar">USD</option> <option value="Euro Dollar">EUR</option> <option value="Aud Dollar">AUD</option> <option value="Bahrien ">BHD</option></select><script> var select = document.getElementById('rupeeitems'); var input = document.getElementById('txtval'); select.onchange = function () { input.value = select.value; } var select2 = document.getElementById('cmbitems'); var input2 = document.getElementById('txtprice'); select2.onchange = function () { input2.value = select2.value; }</script>您必须</select>正确关闭并且必须为变量使用不同的名称，否则您将重新分配它们的值。 -
慕容708150
请下次使用正确的缩进。当代码格式不正确时，代码很难阅读。这个问题很容易解决，你应该研究const、let和var以及它们各自的区别。<input type="button" class="btn btn-sm btn-w1" name="txtval" id="txtval" onClick="checkVal()"> <select class="lbbg selsm-2 inblock-2 " name="rupeeitems" id="rupeeitems"> <option value="">Select</option> <option value="RUB Dollar">RUB</option> <option value="AFN Dinaar">AFN</option> <option value="EUR Dollar">EUR</option> </select> <input type="button" class="btn btn-sm btn-w1" name="txtprice" id="txtprice" onClick="checkPrice()"> <select class="lbbg selsm-2 inblock-2 " name="cmbitems" id="cmbitems"> <option value="">Select</option> <option value="USD Dollar">USD</option> <option value="Euro Dollar">EUR</option> <option value="Aud Dollar">AUD</option> <option value="Bahrien ">BHD</option> </select>// place your scripts here<script> // use descriptive variable names const cmbItems = document.getElementById('cmbitems'); const txtPrice = document.getElementById('txtprice'); const rupeeItem = document.getElementById('rupeeitems'); const txtVal = document.getElementById('txtval'); // since you are using anonimous functions // if you browser allows, use ES6 syntax cmbItems.onchange = () => txtPrice.value = this.value; rupeeItem.onchange = () => txtPrice.value = this.value;</script>
随时随地看视频慕课网APP
相关分类
JavaScript