Question

我正在创建一个选择框，当我在主选择框“域”中选择一个值时，它将出现其他选择框类型，例如“硅藻”或“鞭毛”。...但是我已经完成了该部分，但是我试图改回在选择框中选择的项目，新的出现在主要的第一个项目中。我的意思是，当我在“域中选择硅藻”选择框时，它将出现，然后我在“硅藻”中选择了一些项目。然后我更改“域”中的其他项目，其他选择框将出现，硅藻将消失。但是，事情是我选择的所选项目仍然保留，就像我选择它时一样，我想将其更改回默认的第一个选项，而不是项目。这是我的代码

我已经尝试将'selectedIndex'设置为0。但是它不起作用。

HTML

<ul class="inline_list">
    <li class="Domains">
        <select>
            <option selected disabled hidden>Domains</option>
            <option value="Diatoms">Diatoms</option>
            <option value="Flagellates">Flagellates</option>
            <option value="Dinoflagellates">Dinoflagellates</option>
            <option value="Ciliates">Ciliates</option>
            <option value="Coccolithophore">Coccolithophore</option>
            <option value="Miscellaneous">Miscellaneous</option>
            <option value="Other_plankton">Others</option>
        </select>
    </li>
    <li class="Diatoms domains_types">
        <select>
            <option selected disabled hidden>Types</option>
            <option value="Asterionellopsis">Asterionellopsis</option>
            <option value="Bacillaria">Bacillaria</option>
        </select>
    </li>
    <li class="Flagellates domains_types">
        <select>
            <option selected disabled hidden>Types</option>
            <option value="amoeba">amoeba</option>
            <option value="Chrysochromulina">Chrysochromulina</option>
        </select>
    </li>
    <script src="js/select_box.js"></script>
</ul>

CSS

.domains_types{
            display: none;
        }

jQuery

$(document).ready(function(){
    $('.Domains').ready(function(){
        $('select').change(function(){
            $("select option:selected").each(function(){
                if($(this).attr("value")=="Diatoms"){
                    $('.domains_types').hide();
                    $('.Diatoms').css('display','inline-block');
                }
                if($(this).attr("value")=="Flagellates"){
                    $('.domains_types').hide();
                    $('.Flagellates').css('display','inline-block');
                }
            });
        }).change();
    });
});

Answer 1

您可以轻松优化代码以减少代码中的冗余。我们可以做的一些简单的改进：

从ready中删除$('.Domains')事件监听器。 ready函数仅特定于文档对象，该对象映射到DOMContentLoaded事件。这只是jQuery提供的一种便捷方法。
您可以通过调用<select>来简单地获取this.value元素的值，而不是遍历所有选项。这会从您的代码中删除一层嵌套
您不必使用每个if的新语句，而是可以使用'.' + this.value选择正确的元素，因为第一个{{1 }}元素用于<select>元素第二级的<li>包装器的值。例如，如果选择的值为<select>，则选择器将选择Flagellates，其结果为$('.' + this.value)
要“重置”第二级$('.Flagellates')元素，只需选择第一个选项并将其<select>属性设置为true，即selected。
$('option:first-child').prop('selected, true')不是hidden元素的属性/属性。您可以将其删除。

考虑到这一点，下面是经过改进的有效代码：

<option>

$(document).ready(function() {
  $('.Domains select').change(function() {
    $('.domains_types')
      .hide()                            // Hide the <li> element
      .find('select option:first-child') // Get the nested select's first option
      .prop('selected', true);           // Select it
      
    $('.' + this.value).css('display', 'inline-block');
  }).change();
});

.domains_types {
  display: none;
}

使用Jquery将选定的元素变回主库

1 个答案: