如何实现点击功能

debugcn 发表于 Dev

梅尔宾·马泰

我有一个下拉菜单。如果我选择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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。