如何使用jquery将值应用于选项更改的所有输入？

问题描述

我想更改 input:text 菜单中所有 select 的值。此值将仅更改匹配的 td.class 从 data-pset 内的 <select>

我只能想到这段代码。请帮我找出我失踪的地方。 （我是 jquery 的新手，还在学习。）

$("select.set_price").change(function() {
  var pset = $(this).data('pset');
  $(this).find('td.' + pset).find('input.price').val($(this).val());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <th>#</th>
    <th align="left">
      <select class="set_price" data-pset="set1">
        <option value="" disabled selected>Set1</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
      </select>
    </th>
  </tr>
  <tr>
    <td>1</td>
    <td class="set1"><input type="number" name="set1_1" value="1" /></td>
  </tr>
  <tr>
    <td>2</td>
    <td class="set1"><input type="number" name="set1_2" value="1" /></td>
  </tr>
  <tr>
    <td>3</td>
    <td class="set1"><input type="number" name="set1_3" value="1" /></td>
  </tr>

  <tr>
    <th>#</th>
    <th align="left">
      <select class="set_price" data-pset="set1">
        <option value="" disabled selected>Set2</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
      </select>
    </th>
  </tr>
  <tr>
    <td>4</td>
    <td class="set2"><input type="number" name="set2_1" value="1" /></td>
  </tr>
  <tr>
    <td>5</td>
    <td class="set2"><input type="number" name="set2_2" value="1" /></td>
  </tr>
  <tr>
    <td>6</td>
    <td class="set2"><input type="number" name="set2_3" value="1" /></td>
  </tr>
</table>

我希望每个集合下的所有输入都会根据选择更改相应地更改值。请点击此处查看小提琴：https://jsfiddle.net/stgcd5k7/

解决方法

您的 jQuery 代码存在三个问题。

1. 您正在寻找 td 元素 inside 调用 select 时的 find()。而是从 DOM 根目录中查找它们。
2. 您尚未将 price 类添加到 input HTML。
3. 第二个 .set_price 元素将其 data-pset 的值设置为 set1 而不是 set2。

解决这些问题并且逻辑正常工作：

$("select.set_price").change(function() {
  var pset = $(this).data('pset');
  $('td.' + pset).find('input.price').val($(this).val());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <th>#</th>
    <th align="left">
      <select class="set_price" data-pset="set1">
        <option value="" disabled selected>Set1</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
      </select>
    </th>
  </tr>
  <tr>
    <td>1</td>
    <td class="set1"><input type="number" name="set1_1" value="1" class="price" /></td>
  </tr>
  <tr>
    <td>2</td>
    <td class="set1"><input type="number" name="set1_2" value="1" class="price"  /></td>
  </tr>
  <tr>
    <td>3</td>
    <td class="set1"><input type="number" name="set1_3" value="1" class="price"  /></td>
  </tr>

  <tr>
    <th>#</th>
    <th align="left">
      <select class="set_price" data-pset="set2">
        <option value="" disabled selected>Set2</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
      </select>
    </th>
  </tr>
  <tr>
    <td>4</td>
    <td class="set2"><input type="number" name="set2_1" value="1" class="price"  /></td>
  </tr>
  <tr>
    <td>5</td>
    <td class="set2"><input type="number" name="set2_2" value="1" class="price"  /></td>
  </tr>
  <tr>
    <td>6</td>
    <td class="set2"><input type="number" name="set2_3" value="1" class="price"  /></td>
  </tr>
</table>