Question

＆＃13;

function a()
 {
 var e2 = document.getElementById("fid");
 var strUser2 = e2.options[e2.selectedIndex].text;
 document.getElementById("fid2").value=strUser2;

 }

＆＃13;

<table>
  <tr>
  <th>A</th>
  <th>B</th>
  <th>C</th>
  </tr>
  <tr>
  <td><input type="text" name="id1" form="form2" id="id1" class="form-control input-sm" ></td>
      <td><select class="form-control" id="fid" name="fid" form="form2" required>
        <option value="" selected>Select</option>
        <c:forEach var="b"  items="${model.list2}">
        <option value="${b.id}">${b.name}</option>
        </c:forEach>
        	</select></td>
        	
        	 <td ><input class="form-control" id="fid2" name="fid2" required></td>
  </tr>
  
  </table>

＆＃13;

表行是动态的。行将根据搜索进行填充。只有第二列和第三列是可编辑的。第3列应包含在第2列中选择的值。此代码仅适用于第1行。但它应该适用于所有行。如何实现它。

Answer 1

您可以这样做，因为单个网页上没有两个元素可以具有相同的ID。您也可以使用类选择器来完成此操作。

function a()
 {
 var e1 = document.getElementById("id1");
 var strUser2 = e1.options[e1.selectedIndex].text;
 document.getElementById("id2").value=strUser2;

 }
 function b()
 {
 var e2 = document.getElementById("id3");
 var strUser2 = e2.options[e2.selectedIndex].text;
 document.getElementById("id4").value=strUser2;
 }

<table>
  <tr>
  <th>A</th>
  <th>B</th>
  </tr>
  <tr>
  <td><select class="form-control select" id="id1" name="id1" onchange="a()" required>
       <option selected>Select</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
        <option>D</option>
        <option>E</option>
        <option>F</option>
        </select></td>
  <td><input type="text" name="id2" id="id2" class="texts"></td>
  </tr>
  <tr>
  <td><select class="form-control" id="id3" name="id3" onchange="b()" required>
       <option selected>Select</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
        <option>D</option>
        <option>E</option>
        <option>F</option>
        </select></td>
  <td><input type="text" name="id4" id="id4"></td>
  </tr>
  
  </table>

Answer 2

尝试将select传递给您的函数，以防止一个DOM查询，并将select与输入匹配，并将属性名称设置为id。

这种方式更清洁，更快速，可重复使用。

Fiddle here

<table>
  <tr>
    <th>A</th>
    <th>B</th>
  </tr>
  <tr>
    <td><select class="form-control" name="id1" onchange="a( this )" required>
      <option selected>Select</option>
      <option>A</option>
      <option>B</option>
      <option>C</option>
      <option>D</option>
      <option>E</option>
      <option>F</option>
      </select></td>
    <td><input type="text" id="id1"></td>
  </tr>
  <tr>
    <td><select class="form-control" name="id2" onchange="a( this )" required>
      <option selected>Select</option>
      <option>A</option>
      <option>B</option>
      <option>C</option>
      <option>D</option>
      <option>E</option>
      <option>F</option>
      </select></td>
    <td><input type="text" id="id2"></td>
  </tr>
</table>


<script>
  function a( select ) {
    var target = document.getElementById( select.name );
    target.value = select.value;
  }
</script>

Answer 3

不要依赖Ids，我会这样解决函数a现在需要2个参数，首先是当前的select元素，第二个是要更新的输入的ID（它应该是不同的而不是重复的）

z2

在html表的下一个td中显示所选选项

3 个答案: