最近的函数在JQuery中不起作用

Question

我正在制作一个选择列表。

现在我想在选择列表中显示选项，其中包含＆＃34; new＆＃34;根据列表中选项的变化，使用旧的＆＃34;。

同样，当选择选项1时，3,4,5可见，当选择选项2时，可以看到6,7,8。

另外，我想控制相应行中的选项。

＆＃13;

＆＃13;

$(document).ready(function() {
  $(".new").children('option:gt(0)').hide();
  $('.new option[value="select"]').show();
  $('.new option[value="1"]').show();
  $('.new option[value="2"]').show();
  $('.new option[value="3"]').show();
  $(function() {
    $(".old").change(function() {
      var a = $(this).val();
      if (a == 2) {
        $(".new").children('option:gt(0)').hide();
        $('$(this).closest('tr').find('.new') option[value="select"]').show();
        $('$(this).closest('tr').find('.new') option[value="4"]').show();
        $('$(this).closest('tr').find('.new') option[value="5"]').show();
        $('$(this).closest('tr').find('.new') option[value="6"]').show();
      };
    });
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <select class="old">
        <option value="1">1</option>
        <option value="2">2</option>
      </select>
    </td>
    <td>
      <select class="new">
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>
      <select class="old">
        <option value="1">1</option>
        <option value="2">2</option>
      </select>
    </td>
    <td>
      <select class="new">
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
      </select>
    </td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 1

jQuery语句

中存在语法错误

$(document).ready(function() {
    $(".new").children('option:gt(0)').hide();
    $('.new option[value="select"]').show();
    $('.new option[value="1"]').show();
    $('.new option[value="2"]').show();
    $('.new option[value="3"]').show();
    $(function () {
        $(".old").change(function () {
            var a = $(this).val();
            if (a == 2) {
                $(".new").children('option:gt(0)').hide();
                $(this).closest('tr').find('.new option[value="select"]').show();
                $(this).closest('tr').find('.new option[value="4"]').show();
                $(this).closest('tr').find('.new option[value="5"]').show();
                $(this).closest('tr').find('.new option[value="6"]').show();
            };
        });
    });
});

Answer 2

您需要删除jQuery调用周围的无效引号。

此外，$(function(){})是$(document).ready(function(){})的简写，因此您不需要两次就绪功能。

$(function() {
  // Hide all children for all 'new' combos.
  $('.new').children('option:gt(0)').hide();
  
  // Show only first three 'new' items (if available).
  $('.new option[value="select"]').show();
  $('.new option[value="1"]').show();
  $('.new option[value="2"]').show();
  $('.new option[value="3"]').show();

  $('.old').change(function() {
    var a = $(this).val();
    if (a == 2) {
      // Hide all children for all 'new' combos.
      $('.new').children('option:gt(0)').hide();
      
      // Show only the 'new' items for the current row.
      let $rowNew = $(this).closest('tr').find('.new');
      $rowNew.find('option[value="select"]').show();
      $rowNew.find('option[value="4"]').show();
      $rowNew.find('option[value="5"]').show();
      $rowNew.find('option[value="6"]').show();
    };
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <select class="old">
        <option value="1">1</option>
        <option value="2">2</option>
      </select>
    </td>
    <td>
      <select class="new">
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>
      <select class="old">
        <option value="1">1</option>
        <option value="2">2</option>
      </select>
    </td>
    <td>
      <select class="new">
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
      </select>
    </td>
  </tr>
</table>