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>

所以，当我选择选项：1时，输入字段必须填充否。比方说，人数= 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的引用传递给函数。每个表单控件都有一个表单属性，该属性是对其所在表单的引用。其余的应该很容易理解，但请询问您是否需要其他帮助。

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 个答案: