时间戳

首页 > 解决方案 > 两个选择选项 - 不需要验证和隐藏选项

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

问题描述

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

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

如果电视节目只值device, tsignal, blackscreen,other

如果 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>

标签： javascriptjqueryhtml

解决方案

我猜你打算使用.change所以当#test下拉列表改变时你检查它的值并基于那个 show / hide options，对吧？

$('#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>

注意隐藏option不是跨浏览器

推荐阅读