JavaScript根据选定的选项值将值分配给输入字段

Question

我正在尝试：在单独的INPUT FIELD中输入选定OPTION的OUTPUT值。 但是，它无法正常工作，我无法确定出什么问题了。

码：

      <!doctype html>
      <html lang="en">
      <head>
      <meta charset="UTF-8">
      <title>Document</title>


      <script src="https://ajax.googleapis.com/ajax/libs/jQuery/2.2.2/jquery.min.js"></script>

      <script type="text/JavaScript">

      function validate()
      {
      var ddl = document.getElementById("cardtype");
      var selectedValue = ddl.options[ddl.selectedIndex].value;
      document.getElementById("aid").value = selectedValue;
      //$("#aid").value = selectedValue;

      }
      </script>

      </head>
      <body>


      <select id="cardtype" name="cards" onChange="validate()">
      <option value="selectcard">--- Please select ---</option>
      <option value="mastercard">Mastercard</option>
      <option value="maestro">Maestro</option>
      <option value="solo">Solo (UK only)</option>
      <option value="visaelectron">Visa Electron</option>
      <option value="visadebit">Visa Debit</option>
      </select><br/>

      <input type="text" id="aid" name="aid" />


      </body>
      </html>

如果使用，有什么区别：

document.getElementById("aid").innerHTML = selectedValue;

Answer 1

 $("#cardtype").on("change", function(){ $("#aid").val($('#cardtype').val()); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="cardtype" name="cards"> <option value="selectcard">--- Please select ---</option> <option value="mastercard">Mastercard</option> <option value="maestro">Maestro</option> <option value="solo">Solo (UK only)</option> <option value="visaelectron">Visa Electron</option> <option value="visadebit">Visa Debit</option> </select><br/> <input type="text" id="aid" name="aid" />

请尝试一下，我已经更新了您的代码以使用jQuery。

Answer 2

您的代码工作正常，请在此处进行检查。

 function validate() { var ddl = document.getElementById("cardtype"); var selectedValue = ddl.options[ddl.selectedIndex].value; document.getElementById("aid").value = selectedValue; // document.getElementById("aid").innerHTML = selectedValue; }

 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document </title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2 /jquery.min.js"> </script> </head> <body> <select id="cardtype" name="cards" onChange="validate()"> <option value="selectcard">--- Please select --- </option> <option value="mastercard">Mastercard </option> <option value="maestro">Maestro </option> <option value="solo">Solo (UK only) </option> <option value="visaelectron">Visa Electron </option> <option value="visadebit">Visa Debit </option> </select> <br/> <input type="text" id="aid" name="aid" /> </body> </html>

设置值通常用于输入/表单元素。 innerHTML通常用于div，span，td和类似元素。

value仅适用于具有value属性的对象（通常是窗体控件）。

innerHtml适用于可以包含HTML的每个对象（div，span，但还有许多其他控件以及窗体控件）。

它们不是等效的或不可替换的。 取决于您要实现的目标

Answer 3

你一切都很好。 只需更改此行即可。

var selectedValue = ddl.options[ddl.selectedIndex].value;

对此

var selectedValue = ddl.value;

 function validate() { var ddl = document.getElementById("cardtype"); var selectedValue = ddl.value; document.getElementById("aid").value = selectedValue; //$("#aid").value = selectedValue; }

 <select id="cardtype" name="cards" onChange="validate()"> <option value="selectcard">--- Please select ---</option> <option value="mastercard">Mastercard</option> <option value="maestro">Maestro</option> <option value="solo">Solo (UK only)</option> <option value="visaelectron">Visa Electron</option> <option value="visadebit">Visa Debit</option> </select> <br/> <input type="text" id="aid" name="aid" />

JavaScript根据选定的选项值将值分配给输入字段

问题描述

3 个解决方案

解决方案1
0 2016-06-14 12:35:34

解决方案2
0 2016-06-14 12:35:52

解决方案3
0 2016-06-14 13:31:07

JavaScript根据选定的选项值将值分配给输入字段

问题描述

3 个解决方案

解决方案1 0 2016-06-14 12:35:34

解决方案2 0 2016-06-14 12:35:52

解决方案3 0 2016-06-14 13:31:07

解决方案1
0 2016-06-14 12:35:34

解决方案2
0 2016-06-14 12:35:52

解决方案3
0 2016-06-14 13:31:07