Question

我必须以表格格式显示值列表。我在输入文本框值中传递id我将隐藏它，我的问题是当我更改下拉列值时如何获取文本框值。当我更改下拉列表时，它将更新特定的ID。在这里，我附上了截图。提前致谢。我已尝试过以下代码，但它只会采用第一个ID。

<td>
  <select name="type" id="type" class="form-control">
    <option value="general">General</option>
    <option value="coin">Coin</option>
    <option value="token">Token</option>
  </select>
</td>
<td>
  <input type="hidden" id="comp_id" value="<?php echo $row['company_id']; ?>">
</td>

<script>
$(document).ready(function() {
  var type_val;
  $('#type').on('change', function() {
    var fav = $('#comp_id').val();
    alert(fav);
    type_val = $('#type').val();
    console.log(type_val);
  });
});
</script>

expected output

Answer 1

<td>
  <select name="type" id="type" class="form-control">
    <option value="general">General</option>
    <option value="coin">Coin</option> 
    <option value="token">Token</option> 
  </select>
</td>
<td>
  <input type="hidden" id="comp_id" value="<?php echo $row['company_id']; ?>">
</td>
<script>
  $(document).ready(function() {
        var type_val;
        $('#type').on('change', function() {
          // find parent tr then find #comp_id inside it
          var fav = $(this).closest('tr').find('#comp_id').val();
          alert(fav);
          type_val = $('#type').val();
          console.log(type_val);
        });
</script>

Answer 2

你可以像这样使用父母和下一个。

$(document).ready(function() {

        $('#type').on('change', function() {
          $(this).parent().next('td').find('input').val()
    });
});

注意：请勿使用重复ID。它违反了规则。请改用类找到输入的id。它只占用第一个id，因为不允许重复的id。

工作代码段。

$('#type').on('change', function() {
console.log($(this).parent().next('td').find('input').val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <select name="type" id="type" class="form-control">
    <option value="general">General</option>
    <option value="coin">Coin</option> 
    <option value="token">Token</option> 
  </select>
    </td>
    <td>
      <input type="hidden" class="comp_class" value="Your Value From Php">
    </td>
  </tr>
</table>

Answer 3

切勿在单页上使用同名的多个ID。

动态生成你的id，类型为type1，type2 ......和comp1，comp2 ......

 <table>
      <tr>
        <td>
          <select name="type1" id="type1" class="form-control sel">
            <option value="general">General</option>
            <option value="coin">Coin</option> 
            <option value="token">Token</option> 
          </select>
        </td>
        <td>
          <input type="hidden" id="comp_id1" value="1">
        </td>
      </tr>
      <tr>
        <td>
          <select name="type2" id="type2" class="form-control sel">
            <option value="general">General</option>
            <option value="coin">Coin</option> 
            <option value="token">Token</option> 
          </select>
        </td>
        <td>
          <input type="hidden" id="comp_id2" value="2">
        </td>
      </tr>
    </table>


<script>
     $('.sel').change(function(){
            var select_id = $(this).attr('id');
        var offset = select_id.substring(4);

        var type = $(this).val();
        alert(type);
        var comp = $('#comp_id'+offset).val();
        alert(comp);
    });
</script>

这是jsfiddle链接： jsFiddle

当我更改下拉值时获取最近的输入文本框值

3 个答案: