如何隐藏加载jquery的下拉菜单答案

【问题标题】：How to hide dropdown on load jquery如何隐藏加载jquery的下拉菜单
【发布时间】：2021-01-08 17:45:56
【问题描述】：

美好的一天，

我试图了解 JQuery 隐藏/显示和更改元素的工作原理。在示例中是 4 个下拉菜单，第一个下拉菜单“请选择”具有更改功能。根据选择的选项，出现正确的框。那里看起来不错。我遇到的唯一麻烦是如何隐藏除父框 onload 之外的所有内容。

小提琴：https://jsfiddle.net/wj_fiddle_playground/mt69f5w4/15/

下面的Javascript：

$(document).ready(function() {

  $('#exampleFruit').change(function() {
    var val = $('#exampleFruit').val();
    $('.exampleSubselect').hide();
    if(val) {
        $('#example'+val).show();
    }

【问题讨论】：

标签： javascript html jquery jquery-ui

【解决方案1】：

jQuery 方法工作简单：

show() 只是添加 css-property display: block

hide() 只需添加 css-propery display: none

所以你应该在你的选择中添加style="display: none;"

小提琴：https://jsfiddle.net/kodxg0y8/

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Show Hide Elements</title>

</head>
<body>
<tr id="table1">
 <select id="exampleFruit">
    <option value="">-- Please Select --</option>
    <option>Apple</option>
    <option>Banana</option>
    <option>Orange</option>
</select>
</tr>

<tr id="table2">
<select id="exampleApple" class="exampleSubselect" style="display: none;">
    <option>Red Delicious</option>
    <option>Granny Smith</option>
    <option>Cox's Orange Pippin</option>
</select>
</tr>
<tr id="table3">
<select id="exampleBanana" class="exampleSubselect" style="display: none;">
    <option>Plantain</option>
    <option>Burro</option>
    <option>Cavendish</option>
</select>
</tr>
<tr id="table4">
<select id="exampleOrange" class="exampleSubselect" style="display: none;">
    <option>Blood</option>
    <option>Navel</option>
    <option>Valencia</option>
</select>
</tr>
</body>
</html>

$(document).ready(function() {
    $('#exampleFruit').change(function() {
        var val = $('#exampleFruit').val();
        $('.exampleSubselect').hide();
        if(val) {
            $('#example'+val).show();
        }
        
    });
});

【讨论】：

好的，因为我现在将尝试选项值