简体   繁体   中英

Select boxes - Display/No display

I have a page which allows users to comple one - three select boxes.

The first select box is shown on the page when it loads, then the user can click "Add filter 2/3/4"

See code below:

<div id="filter2"><a href="#">Add Filter 2</a></div>           
    <div id="filtertwo">           

      <label class="">Filter 2</label>
      <select class="full-width" data-placeholder="Select Filter" name="filter2" data-init-plugin="select2">

      <option value="test">Test</option>
      <option value="test1">Test1</option>
      </select>   

    <script>
        $(document).ready(
        function() {
            $("#filter2").click(function() {
                $("#filtertwo").toggle();
            });
        });

    </script>

    <style>
         #filtertwo {
        display: none;
    }
    </style>

The coding is the same for each of my select boxes. I would like to just show text "Add New Filter" only once, is this possible?

I have attached a screenshot so you can see my current page: 在此处输入图片说明

<div id="filter2"> <a id="filterLink" href="#"> Add New Filter </a> </div>

<script>
     $(document).ready(function(){
          $("#filter2").click(function() {
              $("#filtertwo").toggle();
              $("filterLink").hide();
              $("filter2").innerHTML = "<a id='filterLink' href='#'> Add Filter 2 </a>";
          });
     });
</script>

Now Repeat the code innerHTML how many time you want that link.

If i understand you properly. Consider following snippet:

$(document).ready(
    function() {
        $("#filter1,#filter2, #filter3").click(function() {
            $('.filter').hide();
            $(this).next('.filter').toggle();
        });
    });

DEMO


If you want to show only one filter link:

$(document).ready(
    function() {
        $(".filter-link").click(function() {
            $(".filter-link").hide();
            $(".filter-link").not(this).show();
            $('.filter').hide();
            $(this).next('.filter').toggle();
        });
    });

Updated DEMO

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM