根据复选框隐藏下拉列表中的列表项

Question

我有一个包含 4 个复选框的报告，这些复选框可以更改报告显示的内容。还有一个搜索功能，因此用户可以搜索某些公司。但是根据选中的复选框，只需要显示下拉列表中的某些搜索选项。

<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>

因此，根据选中的复选框，我只希望显示某些 ListItems。

$(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
            }
        });
    });

编辑好的，所以我使用了添加和删除。 rbNormal 是始终选中的默认选项，除非用户单击其他按钮。当我单击 rbDailyReport 时，它应该在下拉列表中显示第四个列表项，但实际上没有。它仍然被删除。

 $(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();
            }
        });
    });

Answer 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');
     }
   });
 });

Answer 2

试试我下面的代码，我希望它能解决你的问题。

<!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>

Answer 3

您必须 remove/add 根据需要选择元素。

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

和

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

根据复选框隐藏下拉列表中的列表项

hide list items in dropdownlist based on checkboxes

asp.net

checkbox

jquery

listitem