javascript - 两个选择选项 - 不需要验证和隐藏选项

Question

我试图根据在另一个选择选项上选择的内容来显示一组选择选项。我在理解 js 脚本的逻辑时遇到一些问题。

示例:关于如何隐藏其他未使用的选项的任何建议

如果电视仅显示值设备、tsignal、黑屏、其他

如果 radio 仅显示值:device、rsignal、other

$('#new').find('option').not('[value="device"]').remove();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>

<form>
  <table>
    <tbody>
      <tr>
        <td>Issue:</td>
        <td>
          <select required id="test" name="test">
            <option value="" disabled selected>Choose an option</option>
            <option value="tv">tv</option>
            <option value="radio">radio</option>
          </select>
        </td>
      </tr>
      <tr>
        <td height="50px" colspan="3"></td>
      </tr>
      <tr>
        <td>What is the problem?</td>
        <td>
          <select id="new" name="new">
            <option value="" disabled selected>Select an option</option>
            <option value="device">device is defect</option>
            <option value="rsignal">radio has no signal</option>
            <option value="tsignal">radio has no signal</option>
            <option value="blackscreen">tv blackscreen</option>
            <option value="other">Other</option>
          </select>
        </td>
      </tr>
      <tr>
        <td><input type="submit" class="submit" value="submit"></td>
      </tr>
    </tbody>
  </table>
</form>

Answer 1

我猜您打算使用.change，因此当#test下拉列表更改时，您检查其值并基于该显示/隐藏选项s，对吗？

$('#test').change(function() {
  const options = $('#new').find('option').show();
  if ($(this).val() === 'tv') {
    options.not('[value="device"]').hide();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>

<form>
  <table>
    <tbody>
      <tr>
        <td>Issue:</td>
        <td>
          <select required id="test" name="test">
            <option value="" disabled selected>Choose an option</option>
            <option value="tv">tv</option>
            <option value="radio">radio</option>
          </select>
        </td>
      </tr>
      <tr>
        <td height="50px" colspan="3"></td>
      </tr>
      <tr>
        <td>What is the problem?</td>
        <td>
          <select id="new" name="new">
            <option value="" disabled selected>Select an option</option>
            <option value="device">device is defect</option>
            <option value="rsignal">radio has no signal</option>
            <option value="tsignal">radio has no signal</option>
            <option value="blackscreen">tv blackscreen</option>
            <option value="other">Other</option>
          </select>
        </td>
      </tr>
      <tr>
        <td><input type="submit" class="submit" value="submit"></td>
      </tr>
    </tbody>
  </table>
</form>

注意隐藏选项不是cross browser