jQuery를 최적화합니다. 받침대 - 드롭 다운리스트의 숨기기 옵션
-
20-12-2019 - |
문제
나는 2 개의 옵션을 가지고 있습니다.DDLProduct가 변경되면 DDLPackage에서 몇 가지 옵션을 숨기고 표시합니다.제품과 패키지 간의 매핑은 각 패키지 옵션에서 값입니다.이
처럼<select name="ctl00$MidContent$ddlPackage" class="selectpicker" id="ddlPackage" style="display: none;" data-width="100%" data-style="btn-own btn-select hideDisabled">
<option value="134260004;Administrace;AXAPTA">
.
이 문자열을 분리하고 현재 선택된 제품에 마지막 부분을 비교합니다.
dropdownlist의 경우 부트 스트랩 확장자 : 부트 스트랩 - 선택 .
$("#ddlProduct").change(function () {
var product = $("#ddlProduct option:selected").text().trim();
$("#ddlPackage option").each(function () {
var optValues = $(this).val().split(";");
var opt2 = optValues[2].trim();
if (opt2 == "") {
$(this).show();
}
else {
if (opt2 == product) {
$(this).show();
}
else {
$(this).hide();
}
}
});
$("#ddlPackage").val($("#ddlPackage option:first").val());
$("#ddlPackage").selectpicker('refresh');
<asp:Panel ID="Panel39" runat="server" CssClass="row">
<asp:Panel ID="Panel40" runat="server" CssClass="row compenserow col-lg-4 col-md-4 col-sm-6">
<asp:Label ID="Label29" runat="server" CssClass="col-lg-4 col-md-4 col-sm-4 col-xs-4">Prudukt: </asp:Label>
<asp:Panel ID="Panel63" runat="server" CssClass="bootstrap-select col-lg-8 col-md-8 col-sm-8 col-xs-8">
<asp:DropDownList ID="ddlProduct" data-style="btn-own btn-select" data-width="100%" runat="server" CssClass="selectpicker" ClientIDMode="Static"></asp:DropDownList>
</asp:Panel>
</asp:Panel>
<asp:Panel ID="Panel41" runat="server" CssClass="row compenserow col-lg-4 col-md-4 col-sm-6">
<asp:Label ID="Label31" runat="server" CssClass="col-lg-4 col-md-4 col-sm-4 col-xs-4">Balík: </asp:Label>
<asp:Panel ID="Panel64" runat="server" CssClass="bootstrap-select col-lg-8 col-md-8 col-sm-8 col-xs-8">
<asp:DropDownList ID="ddlPackage" data-style="btn-own btn-select hideDisabled" data-width="100%" runat="server" CssClass="selectpicker" ClientIDMode="Static"></asp:DropDownList>
</asp:Panel>
</asp:Panel>
</asp:Panel>
. 해결책
내 의견으로는 그 문자열 작업입니다.많은 옵션을 처리하는 데 많은 시간이 걸립니다 (나는 약 100 개의 옵션을 기대합니다).사용하는 대신 데이터 속성을 사용해야합니다.하나의 옵션 값에서 여러 정보에 대한 구분 기호로.
코드는 다음과 같이 보일 수 있습니다 :
<option value="134260004;Administrace;AXAPTA" data-id="134260004" data-text="Administrace" data-product="AXAPTA">
.
이제 jQuery로 필요한 것을 읽으십시오.
$("#ddlPackage option").each(function () {
var opt2 = $(this).data('product');
if (opt2 == "") {
$(this).show();
}
else if (opt2 == product)
{
$(this).show();
}
else $(this).hide();
}
});
.
이렇게하면 모든 변경 이벤트로 많은 문자열을 구문 분석해야하며 훨씬 더 빠르게됩니다.)
다른 팁
클래스로 필터링 할 제품을 추가하려고합니다.
<option value="134260004;Administrace;AXAPTA" class="Administrace">
.
및
$("#ddlProduct").change(function () {
var product= $("#ddlProduct option:selected").text().trim();
$("#ddlPackage option:not(."+product+")").hide();
$("#ddlPackage option ."+product).show();
});
.
또는 pirozek의 방식으로
<option value="134260004;Administrace;AXAPTA" data-text="Administrace">
.
및
$("#ddlProduct").change(function () {
var product= $("#ddlProduct option:selected").text().trim();
$("#ddlPackage option:not([data-text='"+product+"'])").hide();
$("#ddlPackage option[data-text='"+product+"']").show();
});
.
이 방법으로 솔루션에서 언급 한 문자열 트림 작동을 피할 수도 있습니다.
제휴하지 않습니다 StackOverflow