hide list items in dropdownlist based on checkboxes

Question

I have a report with 4 checkboxes that changes what the report displays. There is also a search feature so the user can search for certain companies. But depending on what checkbox is checked, only certain search options in the dropdownlist need to be displayed.

<asp:DropDownList runat="server" ID="ddlSearchBy">
     <asp:ListItem Text="All Job Owners" Value="null" ></asp:ListItem>
     <asp:ListItem Text="Job Owner" Value="Customer" ></asp:ListItem>
     <asp:ListItem Text="Col Member" Value="Col Member" ></asp:ListItem>
     <asp:ListItem Text="Del Member" Value="Del Member" ></asp:ListItem>
</asp:DropDownList>

So depending on which checkbox is selected I only want certain ListItems shown.

$(document).ready(function() {
        $('#rbNormal').change(function() {
            if($(this).is(":checked")) {
                 //hide third listitem
            }
        });

        $('#rbDailyReport').change(function () {
            if ($(this).is(":checked")) {
                 //hide third and forth listitem
            }
        });
    });

EDIT Ok so I used add and remove. rbNormal is the default option that is always selected unless the user clicks a different button. When I click rbDailyReport it should display the forth list item in the dropdownlist but it doesn't. It is still removed.

 $(document).ready(function() {

        if ($('#rbNormal').is(':checked')) {
            $("#ddlSearchBy option[value='Col Member']").remove();
            $("#ddlSearchBy option[value='Del Member']").remove();
        }

        $('#rbDailyReport').click(function () {
            if ($(this).is(":checked")) {
                $("#ddlSearchBy option[value='Del Member']").add();
            }
        });
    });

@Igor please see the edit to my question. I used add and remove but it is not adding a list item back in — user123456789
– user123456789, Commented Dec 17, 2015 at 16:25
$("#ddlSearchBy).append("<option value='Del Member'>Del Member</option>"); — Igor
– Igor, Commented Dec 17, 2015 at 16:30
I will say this one last time before going on my merry way: You need to create a temp list, or store the original options (as @jnoreiga suggests), and add/delete based on your selection criteria. Adding hard-wired HTML appends is a very poor solution for maintenance. Always drive it from the content provided by the server and do not duplicate effort. With the "accepted" answer you now have to maintain your options in 2 places. — iCollect.it Ltd
– iCollect.it Ltd, Commented Dec 17, 2015 at 16:42

jnoreiga · Accepted Answer · 2015-12-17 17:44:33Z

1

 var hideoptions = function(indexes) {
   var $select = $('#ddlSearchBy'),
     existinghtml = $select.data('originalhtml'),
     allindices = indexes.split(',');
   if (typeof(existinghtml) == "undefined" || existinghtml == null) {
     existinghtml = $select.html();
     $select.data('originalhtml', existinghtml);
   }
   $select.children().remove();
   $select.append(existinghtml);
   $select.children().filter(function(index) {
     return allindices.indexOf(index.toString()) > -1;
   }).remove();


 };
 $(document).ready(function() {
   $('#rbNormal').change(function() {
     if ($(this).is(":checked")) {
       //hide third listitem
       hideoptions('2');
     }
   });

   $('#rbDailyReport').change(function() {
     if ($(this).is(":checked")) {
       //hide third and forth listitem
       hideoptions('2,3');
     }
   });
 });

edited Dec 17, 2015 at 17:44

answered Dec 17, 2015 at 16:06

jnoreiga

2,18419 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

iCollect.it Ltd Over a year ago

You cannot hide() option elements in a select. Not all browsers support it. You need to remove/add items instead.

iCollect.it Ltd Over a year ago

Interesting approach... have remove DV and await testing.

user123456789 Over a year ago

thanks for answer. It works when I want to hide one ListItem but trying to hide two doesn't work: ` hideoptions('2,3');`

jnoreiga Over a year ago

I was using the eq method incorrectly. I updated it to use filter instead.

Igor · Accepted Answer · 2015-12-17 16:34:03Z

1

You will have to remove/add option elements as needed.

$("#ddlSearchBy option[value='Del Member']").remove();

and

$("#ddlSearchBy).append("<option value='Del Member'>Del Member</option>");

answered Dec 17, 2015 at 16:34

Igor

15.9k1 gold badge29 silver badges34 bronze badges

1 Comment

iCollect.it Ltd Over a year ago

This will always move the new items to the end, defeating any sorting. IMHO this is not a complete solution (and very hard-wired to the HTML).

Faisal Ramzan · Accepted Answer · 2015-12-17 16:19:44Z

0

Try my below code , i hope it should solve your problem.

<!DOCTYPE html>
<html>
<body>
<select id="dropdown1" style="width:200px;">
  <option value="" name="">Dropdpwn Value 1</option>
  <option value="" name="">Dropdown Value 2</option>
</select>
<input type="checkbox" id="check1" value="" checked />
<br />
<select id="dropdown2" style="width:200px;">
  <option value="" name="">Dropdpwn Value 1</option>
  <option value="" name="">Dropdpwn Value 2</option>
</select>
<input type="checkbox" id="check2" value="" checked />
<br />
<select id="dropdown3" style="width:200px;">
  <option value="" name="">Dropdpwn Value 1</option>
  <option value="" name="">Dropdpwn Value 2</option>
</select>
<input type="checkbox" id="check3" value="" checked />
<br />
<select id="dropdown4" style="width:200px;">
  <option value="" name="">Dropdpwn Value 1</option>
  <option value="" name="">Dropdpwn Value 2</option>
</select>
<input type="checkbox" id="check4" value="" checked />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $("#check1").click(function() {
       if ($(this).is(":checked")) { 
          $("#dropdown1").show();
       } else {
          $("#dropdown1").hide();  
       }
    });
    $("#check2").click(function() {
       if ($(this).is(":checked")) { 
          $("#dropdown2").show();
       } else {
          $("#dropdown2").hide();  
       }
    });
    $("#check3").click(function() {
       if ($(this).is(":checked")) { 
          $("#dropdown3").show();
       } else {
          $("#dropdown3").hide();  
       }
    });
    $("#check4").click(function() {
       if ($(this).is(":checked")) { 
          $("#dropdown4").show();
       } else {
          $("#dropdown4").hide();  
       }
    });
});
</script>
</body>
</html>

answered Dec 17, 2015 at 16:19

Faisal Ramzan

1698 bronze badges

3 Comments

iCollect.it Ltd Over a year ago

So your solution is to duplicate ASP lists, client-side, with one list for each possible option selected? Sorry, but this is a terrible idea and incompatible with the ASP list shown :(

Faisal Ramzan Over a year ago

Let me understand , there are 4 checkboxes and 1 dropdown list.. Right ? When any checkbox checked , then dropdown values must change according to that checked value ? Am i right ?

iCollect.it Ltd Over a year ago

How were you expecting the 4 lists to post back correctly as a single list expected by ASP?

Collectives™ on Stack Overflow

hide list items in dropdownlist based on checkboxes

3 Answers 3

4 Comments

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related