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