主页 / 问题 / 556579
Accepted
alikitto
Asked:2020-08-18 06:51:04 +0000 UTC2020-08-18 06:51:04 +0000 UTC

选择第一个时第二个列表中出现故障

  • 772

选择第一个字段时，第二个字段的值会发生变化。但是当你第一次打开页面时，在第二个字段中，默认情况下应该只有“选择模型”，但我显示了所有值。在我选择了第二个或第三个之后，一切都变得更好了。什么是故障？即使选择添加也无济于事。

<select name="first" id="first">
        <option value="one" selected>Выберите марку</option>
        <option value="two">BMW</option>
        <option value="tri">Audi</option>
             </select>
    <select name="second" id="second">
        <option value="one" class="one" selected>Выберите модель</option>
        <option value="two" class="two">Второй 1</option>
        <option value="two" class="two">Второй 2</option>
        <option value="two" class="two">Второй 3</option>
        <option value="tri" class="tri">третий</option>
        <option value="tri" class="tri">третий 2</option>
    </select>
    <script>
    $('#first').change(function(){
        var cls = $(this).val();
        $('#second option').hide();
        $('#second ' + '.' + cls).show();
    });
    </script>
javascript

1 个回答

  1. Best Answer

    您希望option第二个select在页面加载时不显示。有几种方法可以做到这一点。

    使用 CSS

    不显示除所选选项之外的所有选项

    #second option:not([selected]) {
  display: none;
}


    使用 HTML

    添加每个option属性style="display: none"

    <select name="second" id="second">
    <option value="one" class="one" selected>Выберите модель</option>
    <option value="two" class="two" style="display: none">Второй 1</option>
    <option value="two" class="two" style="display: none">Второй 2</option>
    <option value="two" class="two" style="display: none">Второй 3</option>
    <option value="tri" class="tri" style="display: none">третий</option>
    <option value="tri" class="tri" style="display: none">третий 2</option>
</select>


    使用 jQuery

    隐藏option文档对象模型就绪

    $(document).ready(function() {
    $('#second option:not([selected])').hide();
});
    • 2

相关问题