скрыть элементы списка в раскрывающемся списке на основе флажков

У меня есть отчет с 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>

Соответственно, в зависимости от выбранного флажка Я хочу, чтобы некоторые отображаемые листы были показаны.

$(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 поэтому я использовал добавление и удаление. 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(); 
      } 
     }); 
    });

источник

2015-12-17 user123456789

вам придется удалить/добавить опцию элементы в случае необходимости – Igor

@Igor вы можете показать некоторый код? – user123456789

@Igor см. Редактирование на мой вопрос. Я использовал добавление и удаление, но он не добавляет элемент списка обратно в – user123456789

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

источник

2015-12-17 16:06:12 jnoreiga

Вы не можете 'hide()' 'опции' элементов в' select'. Не все браузеры –

ok, я обновил свой ответ на другой подход – jnoreiga

Интересный подход ... удалить DV и ждать тестирования. –

Попробуйте мой код ниже, я надеюсь, что он должен решить вашу проблему.

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

источник

2015-12-17 16:19:44

Итак, ваше решение состоит в дублировании списков ASP на стороне клиента с одним списком для каждой возможной опции? Извините, но это ужасная идея и несовместима с представленным ASP-списком :( –

Позвольте мне понять, что есть 4 флажка и один раскрывающийся список. Правильно? Когда какой-либо флажок установлен, значения выпадающего списка должны меняться в соответствии с этим отмеченным значением? Я правильно? –

Как вы ожидали, что 4 списка вернутся правильно, как один список, ожидаемый ASP? –

Вам необходимо будет удалить/добавить элементы элементов по мере необходимости.

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

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

источник

2015-12-17 16:34:03 Igor

Это всегда будет перемещать новые элементы до конца, победив любую сортировку. ИМХО это не полное решение (и очень жестко подключен к HTML). –

скрыть элементы списка в раскрывающемся списке на основе флажков

ответ

Смежные вопросы