Question

我在HTML表上获取dropdownlist的值时遇到问题。下面是我的示例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。例如：row-1，row-2 ..等等。

在下拉列表中选择项目时，我想在行单元格内的每一行中显示下拉值。我怎样才能做到这一点？请帮忙。

Answer 1

你可以试试这个：

<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());
});

这是DEMO。

Answer 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>

Answer 3

传递对象：

onchange="getValue(this)"

然后，source.parentNode是<td>，而source.parentNode.nextSibling是相邻的<td>

function getValue(source) {
     source.parentNode.nextSibling.innerHTML = this.value;
}

如何使用javascript

3 个答案: