javascript - 如何执行点击功能

我有一个下拉菜单。如果选择home 1，则显示HOME1选项。如果选择home2选项，我想显示home2和隐藏HOME1选项。每次都应显示“选择类别”。我在这里试了一个密码。但没用。请帮忙做这个。谢谢您。

$('.home1').on('click', function() {
  $('.homes').hide();
  $('#HOME1').show();
});

$('.home2').on('click', function() {
  $('.homes').hide();
  $('#HOME2').show();
});

.homes {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-group">
  <label class="names" for="exampleInputName2">Home Page</label>
  <select class="form-control category">
    <option>Select Home Page</option>
    <option class="home1">Home 1</option>
    <option class="home2">Home 2</option>
    <option class="home3">Home 3</option>
    <option class="home4">Home 4</option>
    <option class="home5">home 5</option>
  </select>
</div>

<div class="form-group homes" id="HOME1">
  <label class="names" for="exampleInputName2">Category</label>
  <select class="form-control category">
    <option>Select Category</option>
    <option>Slider</option>
    <option>Company Details</option>
    <option>Why Us</option>
    <option>Client Estimonials</option>
    <option>New Projects</option>
    <option>Latest News</option>
    <option>Our Clients</option>
  </select>
</div>

<div class="form-group homes" id="HOME2">
  <label class="names" for="exampleInputName2">Category</label>
  <select class="form-control category">
    <option>Select Category</option>
    <option>Slider</option>
    <option>Company Details</option>
    <option>Why Us</option>
    <option>Client Estimonials</option>
    <option>New Projects</option>
    <option>Latest News</option>
    <option>Our Clients</option>
  </select>
</div>

最佳答案

$('.category').on('change', function() {
  $('.homes').hide();
  $('#' + $(this)[0].selectedOptions[0].className).fadeIn();
});

.homes {
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
    <label class="names" for="exampleInputName2">Home Page</label>
      <select class="form-control category">
        <option>Select Home Page</option>
        <option class="home1">Home 1</option>
        <option class="home2">Home 2</option>
        <option class="home3">Home 3</option>
        <option class="home4">Home 4</option>
        <option class="home5">home 5</option>
    </select>
</div>

<div class="form-group homes" id="home1">
    <label class="names" for="exampleInputName2">Category</label>
      <select class="form-control category">
        <option>Select Category</option>
        <option>Slider</option>
        <option>Company Details</option>
        <option>Why Us</option>
        <option>Client Estimonials</option>
        <option>New Projects</option>
        <option>Latest News</option>
        <option>Our Clients</option>
    </select>
</div>

<div class="form-group homes" id="home2">
    <label class="names" for="exampleInputName2">Category</label>
      <select class="form-control category">
        <option>Select Category</option>
        <option>Slider</option>
        <option>Company Details</option>
        <option>Why Us</option>
        <option>Client Estimonials</option>
        <option>New Projects</option>
        <option>Latest News</option>
        <option>Our Clients</option>
    </select>
</div>

关于javascript - 如何执行点击功能，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43498390/