在JavaScript中显示所选选项

时间:2017-05-15 09:23:34

标签: javascript

我在第二次选择时显示默认选择“选择学校”时出现问题。我应该在JavaScript中添加什么才能显示此选项?

例如,在加载页面后立即。第一个下拉列表的默认选定项目显示“选择位置”,这很好。但在我的第二个选择中,选择学校没有显示,为什么? JavaScript有什么问题?我在这里缺少什么? 任何新的学习都非常感激。

  $(document).ready(function(){
    var $cat = $('select[name=category]'),
    $items = $('select[name=items]');

    $cat.change(function(){
      var $this = $(this).find(':selected'),
      rel = $this.attr('rel'),
      $set = $items.find('option.' + rel);

      if ($set.size() < 0) {
        $items.hide();
        return;
      }
      $items.show().find('option').hide();

      $set.show().first().prop('selected', true);
    });
  });
 
 .cascade {
    display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="category">
    <option value="0">Choose location</option>
    <option  value="1" rel="1">Bacolod</option>
    <option  value="2" rel="2">Bohol</option>
    <option  value="3" rel="3">Cebu</option>
    <option  value="4" rel="4">Manila</option>
   
</select>
    <br>
  <select name="items" class="cascade">
    <option>Choose school</option>
    <option  value="1" class="1">Bacolod Tay Tung High School</option>
    <option  value="2" class="3">University of Southern Philippines Foundation</option>
    <option  value="3" class="2">Dr. Cecilio Putong National High School</option>
    <option  value="4" class="1">Jack and Jill School</option>
    <option  value="5" class="4">British School Manila</option>
    <option  value="6" class="2">Holy Spirit School of Tagbilaran</option>
    <option  value="7" class="4">Chinese International School Manila</option>
    <option  value="8" class="2">Ubay National Science High School</option>
    <option  value="9" class="3">Abellana National School</option>
</select>

1 个答案:

答案 0 :(得分:1)

将“选择学校”选项中的课程添加为class="0",并将额外参数添加为option.0

$set = $items.find('option.0, option.' + rel);
<option class="0">Choose school</option>