Question

不是一个强大的程序员，但我从这里的几个帖子拼凑了以下HTML / Jquery。它可以在this JSFiddle上找到我的下拉列表和选择在大多数情况下都有效，但我希望状态1和状态2只是标签而不是更改当前选定的选项。我希望页面加载我的第一个选项＆＃34;所有位置＆＃34;要显示，然后在选择其他选项时消失。非常简单，但我看到的所有选项都没有显示页面加载时显示的第一个选项。任何帮助将不胜感激。

<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

Answer 2

设置您不想选择的disabled选项

<select name="options" id="options">
<option value="page-section-20"> All Locations</option>
<option value="" disabled>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="" disabled>State 2</option>
<option value="page-section-40"> - City 1</option>
</select>

如果你想要一个选项disapear，只需删除

$('#options').on('change', function () {
  if(this.value !== "page-section-20"){
      $("#options options[value='page-section-20'").remove();
  }
});

这是demo

Answer 3

您可以使用optgroup将状态显示为不可选标签。您还可以放弃检查选择了哪个项目，默认情况下只隐藏它们，然后显示所选项目。此外，要默认显示默认值，只需使用.trigger('change')触发（手动调用）事件的功能：

jQuery('#options').on('change', function() {
  var section_ids = [20, 24, 28, 32, 36, 40]
  section_ids.forEach(id => jQuery('#page-section-' + id).hide())
  jQuery('#' + this.value).show();
}).trigger('change')

#options {
  color: #35beed;
  font-weight: bold;
  border-color: #35beed;
  border-width: 2px;
}

#locations div {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Schedules</h1>

<div id="locations">

  <select name="options" id="options">
    <option value="page-section-20"> All Locations</option>
    <optgroup label="State 1">
      <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>
    </optgroup>
    <optgroup label="State 2">
      <option value="page-section-40"> - City 1</option>
    </optgroup>
  </select>

  <div id="page-section-20">
    <h2>Section 1</h2>
    <p>Blah Blah Blah</p>
  </div>

  <div id="page-section-24">
    <h2>Section 2</h2>
    <p>Blah Blah Blah</p>
  </div>

  <div id="page-section-28">
    <h2>Section 3</h2>
    <p>Blah Blah Blah</p>
  </div>
  <div id="page-section-32">
    <h2>Section 4</h2>
    <p>Blah Blah Blah</p>
  </div>
  <div id="page-section-36">
    <h2>Section 5</h2>
    <p>Blah Blah Blah</p>
  </div>
  <div id="page-section-40">
    <h2>Section 6</h2>
    <p>Blah Blah Blah</p>
  </div>

</div>

jQuery在Dropdown上显示DIV - 在选择之前显示第一个DIV

3 个答案: