Question

我正在尝试：在单独的INPUT FIELD中输出所选OPTION的值。但是，它不起作用，我无法确定是什么问题。

代码：

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

＆＃13;

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

＆＃13;

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

＆＃13;

请尝试此操作，我已更新您的代码以使用jQuery。

Answer 2

您的代码运行正常，请在此处查看。

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

innerHtml适用于每个可以包含HTML的对象（div，spans，但许多其他对象以及表单控件）。

它们不等同或可替换。取决于你想要实现的目标

Answer 3

你做的一切都好。只需更改此行..

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

到这个

var selectedValue = ddl.value;

＆＃13;

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

＆＃13;

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

＆＃13;

JavaScript从选定的选项值为输入字段赋值

3 个答案: