如何在输入文本框中显示选定的值

Question

我在上面的代码中使用了两个 Select 下拉菜单，我为两者设置了值，不同的地方需要显示不同的内容。 请帮助我如何正确，如果它显示为 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>

Answer 1

您应该更具体地了解变量名称。 此外，您可以使用this关键字来引用 function 内的当前 select 元素。 不确定您为什么使用内联事件处理程序：

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

Answer 2

请下次使用正确的缩进。 如果格式不正确，代码很难阅读。

这个问题很容易解决，你应该研究一下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>

Answer 3

正如@Gabriel Lupu 之前在评论中提到的，最好将所有 js 代码写在页面末尾的<body>标记之前的一个<script>标记中。

此代码有效：

<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>并且您必须为变量使用不同的名称，否则您将重新分配它们的值。

如何在输入文本框中显示选定的值

问题描述

3 个解决方案

解决方案1
1 已采纳 2020-12-05 09:55:16

解决方案2
0 2020-12-05 09:52:49

解决方案3
0 2020-12-05 09:52:55

如何在输入文本框中显示选定的值

问题描述

3 个解决方案

解决方案1 1 已采纳 2020-12-05 09:55:16

解决方案2 0 2020-12-05 09:52:49

解决方案3 0 2020-12-05 09:52:55

解决方案1
1 已采纳 2020-12-05 09:55:16

解决方案2
0 2020-12-05 09:52:49

解决方案3
0 2020-12-05 09:52:55