javascript - jQuery show DIV on Dropdown - 在选择之前显示第一个 DIV

Question

不是一个强大的编码员，但我从这里的几篇文章中拼凑了以下 HTML/Jquery。都可以在this JSFiddle上找到我的下拉菜单和选择大部分都有效，但我希望状态 1 和状态 2 只是标签，而不是更改当前选择的选项。我希望在页面加载时显示我的第一个选项“所有位置”，然后在选择其他选项时消失。非常简单，但我看到的所有选项都没有显示页面加载时显示的第一个选项。任何帮助将不胜感激。

<select name="options" id="options">
<option value="page-section-20"> All Locations</option>
<option value="">State 1</option>
<option value="page-section-24"> - City 1</option>
<option value="page-section-28"> - City 2</option>
<option value="page-section-32"> - City 3</option>
<option value="page-section-36"> - City 4</option>
<option value="">State 2</option>
<option value="page-section-40"> - City 1</option>
</select>

这是我的 jquery

$('#options').on('change', function () {
if(this.value === "page-section-20"){
    $("#page-section-20").show();
} else {
    $("#page-section-20").hide();
}
    if(this.value === "page-section-24"){
   $("#page-section-24").show();
} else {
   $("#page-section-24").hide();
}
        if(this.value === "page-section-28"){
   $("#page-section-28").show();
} else {
   $("#page-section-28").hide();
}
            if(this.value === "page-section-32"){
  $("#page-section-32").show();
} else {
   $("#page-section-32").hide();
}
                if(this.value === "page-section-36"){
   $("#page-section-36").show();
} else {
    $("#page-section-36").hide();
}
                    if(this.value === "page-section-40"){
   $("#page-section-40").show();
} else {
   $("#page-section-40").hide();
}
});

Answer 1

首先要在选择其他选项时删除默认选项，您可以将这段代码添加到您的 onChange 事件中:

$(this).find('option').eq(0).remove();

然后要对选项进行分组，您应该使用 optgroup 标签。

Working Demo