如何获得下拉列表值的HTML表单元格在一行中使用javascript

How to get Dropdownlist value on HTML Table Cell in a Row using javascript

本文关键字：一行 javascript 下拉列表 何获得 HTML 单元格 表单      更新时间：2023-09-26

我有一个问题，在HTML表上获得下拉列表的值。下面是我的html和javascript示例。

<table>
<tr>
  <td>
    <select id="select1" onchange="getValue(this.value)">
      <option value="$">--Please Select--</option>
      <option value="val1">value 1</option>
      <option value="val2">value 2</option>
      <option value="val3">value 3</option>
</select>
</td>
 <td id="row-1"></td>
</tr>
<tr>
 <td>
   <select id="select2" onchange="getValue(this.value)">
      <option value="$">--Please Select--</option>
      <option value="val1">value 1</option>
      <option value="val2">value 2</option>
      <option value="val3">value 3</option>
</select>
</td>
 <td id="row-2"></td>
</tr>
</table>
<script type="text/javascript">
  function getValue(data)
    {
     var myDiv = document.getElementById( "row-1" );
     myDiv.innerHTML = data;
 }
</script>

每一行都有一个唯一的td id。例如:第1行，第2行…等等。

当在下拉列表中选择一个项目时，我想在行单元格内的每一行中显示下拉值。我该怎么做呢?请帮助。

这是你想要的吗?

        <html>
        <head></head>
        <body>
        <table>
        <tr>
          <td>
            <select id="select1" onchange="getValue(this)">
              <option value="$">--Please Select--</option>
              <option value="val1">value 1</option>
              <option value="val2">value 2</option>
              <option value="val3">value 3</option>
        </select>
        </td>
         <td id="select1-value"></td>
        </tr>
        <tr>
         <td>
           <select id="select2" onchange="getValue(this)">
              <option value="$">--Please Select--</option>
              <option value="val1">value 1</option>
              <option value="val2">value 2</option>
              <option value="val3">value 3</option>
        </select>
        </td>
         <td id="select2-value"></td>
        </tr>
        </table>
        <script type="text/javascript">
          function getValue(data)
            {
             var myDiv = document.getElementById( data.id + '-value' );
             myDiv.innerHTML = data.value;
         }
        </script>
        </body>
        </html>

你可以试试:

<table>
<tr>
  <td>
    <select id="select1">
      <option value="$">--Please Select--</option>
      <option value="val1">value 1</option>
      <option value="val2">value 2</option>
      <option value="val3">value 3</option>
</select>
</td>
 <td id="row-1"></td>
</tr>
<tr>
 <td>
   <select id="select2">
      <option value="$">--Please Select--</option>
      <option value="val1">value 1</option>
      <option value="val2">value 2</option>
      <option value="val3">value 3</option>
</select>
</td>
 <td id="row-2"></td>
</tr>
</table>
$('select').change(function() {
      var $this = $(this);
      $this.parent().siblings('td[id^=row-]').html($this.val());
});

传递对象:

onchange="getValue(this)"

则source.parentNode为<td>, source.parentNode.nextSibling为相邻的<td> 

function getValue(source) {
     source.parentNode.nextSibling.innerHTML = this.value;
}
相关文章：