選擇選項時如何自動設置表單中的輸入值？

Question

我有一個表格，例如：

<form>
   <ul>

   <li>
   <select name="choose">
   <option value="0">1</option>
   <option value="1">1</option>
   <option value="2">2</option>

   </select>
   </li>

   <li><h2>No. Of person</h2></li>
    <input type="text" name="ref_person"id="field" value="" />

   <li><h2>earning of person:</h2></li>
    <input type="text" name="ear_person" id="field" value="" />

   </ul>
   </form>

因此，當我選擇option：1時，兩個輸入字段都必須用no填充。 假設人數為3，而收入為$ 5。

Answer 1

這是一個代碼示例，該示例使用onchange事件將值復制到文本框。

<script type="text/javascript">
     function selectOnChange(obj) {

         var val = obj.options[obj.selectedIndex].value;
         var text = obj.options[obj.selectedIndex].text;
         document.getElementById("field1").value = val;
         document.getElementById("field2").value = text;
      }
</script>
</head>
<body>

     <div>
         <select onchange='selectOnChange(this)' name="choose">
               <option value="100">1</option>
               <option value="200">2</option>
               <option value="300">3</option>

          </select>

      </div>
      <ul><li><h2>No. Of person</h2></li></ul>
      <div>
           <input type="text" name="ref_person" id="field1" value="">

           <ul>
                <li><h2>earning of person:</h2></li></ul>
                <input type="text" name="ear_person" id="field2" value="" />
       </div>

Answer 2

您的問題應寫得盡可能好，包括有效的語義HTML。

另外，一個問題應包含您嘗試過的代碼，您嘗試過的內容，出現問題的位置以及您希望執行的操作的解釋，包括一些示例輸入和輸出。

以下內容可能會有所幫助。 請注意，元素ID必須是唯一的，並且表單應使用語義標記（例如，不要使用列表來呈現它，不要在列表中放置標題，使用標簽，使用字段集對元素進行分組等）。

您可以使用select元素的change事件獲取所選選項的值和文本，並將其顯示在表單中的其他位置。 您還可以將表單控件作為表單的命名屬性引用，這比使用getElementById方便且直接。

在代碼中，使用this將對select的引用傳遞給函數。 每個表單控件都有一個form屬性，該屬性引用它所在的表單。其余控件應該很容易理解，但是請詢問是否需要其他幫助。

 function getPerson(select) { var form = select.form; form.ref_person.value = select.options[select.selectedIndex].text; form.ear_person.value = select.value; }

 <form> <fieldset><legend>Person and earning</legend> <label for="personSelect">Select a person <select name="choose" id="personSelect" onchange="getPerson(this)"> <option value="0">1</option> <option value="100">2</option> <option value="500">3</option> </select> </label> <br> <label for="personNumber">No. Of person: <input type="text" name="ref_person"id="personNumber"></label> <label for="personEarning">Earning of person: <input type="text" name="ear_person" id="personEarning"></label> </fieldset> </form>

Answer 3


  
 
  
   
    
       function getPerson(select) {
  var form = select.form;
  form.ref_person.value = select.options[select.selectedIndex].getAttribute('per');
  form.ear_person.value = select.value;
} 
    <form>
  <fieldset><legend>Person and earning</legend>
  <label for="personSelect">Select a person
    <select name="choose" id="personSelect" onchange="getPerson(this)">
      <option per="3" value="0">1</option>
      <option per="9"  value="100">2</option>
      <option per="27"  value="500">3</option>
    </select>
  </label>
  <br>
  <label for="personNumber">No. Of person:
    <input type="text" name="ref_person"id="personNumber"></label>

  <label for="personEarning">Earning of person:
    <input type="text" name="ear_person" id="personEarning"></label>
  </fieldset>
</form>

Answer 4

我無法使用switch語句來工作，因此我使用了三個if語句來執行此操作，但這是我的解決方案。 自己弄弄它，使其如您所願。

<form>
    <ul>
        <li>
            <select name="choose" id="option1" onchange="relatedPrice()">
                <option value="0">1</option>
                <option value="1">2</option>
                <option value="2">3</option>
            </select>
        </li>
        <li><h2>No. Of person</h2></li>
        <input type="text" name="ref_person" id="field1" value="" />
        <li><h2>earning of person:</h2></li>
        <input type="text" name="ear_person" id="field2" value="" />
    </ul>
</form>
<script>
    function relatedPrice() {
        var e = document.getElementById("option1");
        var test = e.options[e.selectedIndex].text;

        document.getElementById("field1").value = test;
        if(test==1) {
            document.getElementById("field2").value = 100;
        }
        if(test==2) {
            document.getElementById("field2").value = 200;
        }
        if(test==3) {
            document.getElementById("field2").value = 300;
        }
    }
</script>

選擇選項時如何自動設置表單中的輸入值？

問題描述

4 個解決方案

解決方案1
1 2015-12-24 21:41:11

解決方案2
1 2015-12-24 23:29:49

解決方案3
1 已采納 2015-12-25 10:38:41

解決方案4
0 2015-12-24 21:37:33

選擇選項時如何自動設置表單中的輸入值？

問題描述

4 個解決方案

解決方案1 1 2015-12-24 21:41:11

解決方案2 1 2015-12-24 23:29:49

解決方案3 1 已采納 2015-12-25 10:38:41

解決方案4 0 2015-12-24 21:37:33

解決方案1
1 2015-12-24 21:41:11

解決方案2
1 2015-12-24 23:29:49

解決方案3
1 已采納 2015-12-25 10:38:41

解決方案4
0 2015-12-24 21:37:33