34btnDoc34clickfunction 34modaldocument34dialog minWidth 1200 buttons Update function var propertyid 34ltlblPropertyIdClientID gt34text var ownershipdocid 34ltddlownershipClientID gt optionselected34val var taxesdocid 34ltddlTaxesClientIDgt optionselected34val var khatha 34ltddlprope

Hi Aashish682Refer the below sampleHTMLlthtml xmlns34httpwwww3org1999xhtml34gtlthead runat34server34gt lttitlegtlttitlegt ltscript type34textjavascript34 src34httpajaxgoogleapiscomajaxlibsjquery172jqueryminjs34gtltscriptgt ltscript src34httpajaxaspnetcdncomajaxjqueryui189jqueryuijs34 type34textjavascript34gtltscriptgt ltlink href34httpajaxaspnetcdncomajaxjqueryui189themesblitzerjqueryuicss34 rel34stylesheet34 type34textcss34 gt ltscript type34textjavascript34gt function 34btnDoc34clickfunction 34modaldocument34dialog buttons Update function Close function thisdialog39close39

ltaspDropDownList ID34ddlTaxes34 runat34server34 class34formpropertycontrol formcontrol jsinselect34 onchange34jsdocumentthisvalue34gt ltaspDropDownListgtDue to this class in the dropdown it is not workingwhen i removed that class its working goodThanks

Enable Disable DropDownList option based on another DropDownList value using jQuery

Aashish6...

SOLVED CLOSED ACTIVE ANSWERED
User: Aashish682
Posted: on Nov 25, 2016 02:02 AM
Forum: jQuery and jQuery Plugins
Answer: 2
Views: 7909

$("#btnDoc").click(function () {
    $("#modaldocument").dialog({
        minWidth: 1200,
        buttons: {
            Update: function () {
                var propertyid = $("#<%=lblPropertyId.ClientID %>").text();
                var ownershipdocid = $("#<%=ddlownership.ClientID %> option:selected").val();
                var taxesdocid = $("#<%=ddlTaxes.ClientID%> option:selected").val();
                var khatha = $("#<%=ddlproperty.ClientID %> option:selected").val();

                $("#<%=hf1.ClientID %>").val(propertyid);
                $("#<%=hf2.ClientID %>").val(ownershipdocid);
                $("#<%=hf3.ClientID %>").val(taxesdocid);
                $("#<%=hf4.ClientID %>").val(khatha);
                $("[id*=btnDocument]").click();
           },
           Close: function () {
               $(this).dialog('close');
           }
       }
    });
});

onchange coding for the dropdownlist values show and hide

<asp:DropDownList ID="ddlTaxes" runat="server" class="form-property__control form-control js-in-select" onchange="jsdocument(this.value)">
</asp:DropDownList>

<script type="text/javascript">
    function jsdocument(taxesdocid) {
        debugger;
        if (taxesdocid == '0') {
            $("#khathalistdiv").css("display", "none");
            $('#<%=ddlproperty.ClientID %>').get(0).selectedIndex = 0;
        }
        else if (taxesdocid == '4') {
            $("#khathalistdiv").css("display", "none");
            $('#<%=ddlproperty.ClientID %>').get(0).selectedIndex = 0;
            $('#<%=ddlproperty.ClientID %>').css("display", "none");
        }
        else if (taxesdocid == '17') {
            $('#<%=ddlproperty.ClientID %>').get(0).selectedIndex = 0;
            $('#<%=ddlproperty.ClientID %>').css("display", "block");
            $("#khathalistdiv").css("display", "block");
            $("#<%=ddlproperty.ClientID %> option[value='3']").show();
            $("#<%=ddlproperty.ClientID %> option[value='16']").show();
            $("#<%=ddlproperty.ClientID %> option[value='22']").hide();
        }
        else if (taxesdocid == '20') {
            $('#<%=ddlproperty.ClientID %>').get(0).selectedIndex = 0;
            $('#<%=ddlproperty.ClientID %>').css("display", "block");
            $("#khathalistdiv").css("display", "block");
            $("#<%=ddlproperty.ClientID %> option[value='3']").show();
            $("#<%=ddlproperty.ClientID %> option[value='16']").show();
            $("#<%=ddlproperty.ClientID %> option[value='22']").show();
        }
        else if (taxesdocid == '21') {
            $('#<%=ddlproperty.ClientID %>').get(0).selectedIndex = 0;
            $('#<%=ddlproperty.ClientID %>').css("display", "block");
            $("#khathalistdiv").css("display", "block");
            $("#<%=ddlproperty.ClientID %> option[value='3']").hide();
            $("#<%=ddlproperty.ClientID %> option[value='16']").hide();
            $("#<%=ddlproperty.ClientID %> option[value='22']").show();
        }
        else {
            $("#khathalistdiv").css("display", "none");
            $('#<%=ddlproperty.ClientID %>').get(0).selectedIndex = 0;
        }
    }
</script>

    <script src="https://code.jquery.com/jquery-1.12.4.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/json2/20130526/json2.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" type="text/javascript"></script>
    <div id="modaldocument" title="Documentation" style="display: none;">
        <div class="form-property__row-item">
            <div class="form-property__group form-group">
                <label for="in-39" class="form-property__label control-label">
                    Ownership</label>
                <asp:DropDownList ID="ddlownership" runat="server" class="form-property__control form-control js-in-select">
                </asp:DropDownList>
            </div>
            <div class="form-property__group form-group chosen-search-show">
                <label for="in-40" class="form-property__label control-label">
                    Property Wise Approval</label>
                <asp:DropDownList ID="ddlTaxes" runat="server" class="form-property__control form-control js-in-select" onchange="jsdocument(this.value)">
                </asp:DropDownList>
            </div>
            <div id="khathalistdiv" class="form-property__group form-group">
                <label for="in-41" class="form-property__label control-label" class="form-property__control form-control js-in-select">
                    Khatha</label>
                <asp:DropDownList ID="ddlproperty" runat="server" class="form-property__control form-control js-in-select">
                </asp:DropDownList>
            </div>
        </div>
    </div>

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 8

Reply
ANSWER
User: dharmendr
Replied: on Nov 25, 2016 05:38 AM
Modified: on Jan 05, 2018 02:27 AM
Report

Hi Aashish682,

Refer the below sample.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
    <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css"
        rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        $(function () {
            $("#btnDoc").click(function () {
                $("#modaldocument").dialog({
                    buttons: {
                        Update: function () {
                        },
                        Close: function () {
                            $(this).dialog('close');
                        }
                    }
                });
                return false;
            });
        });
        function jsdocument(taxesdocid) {
            if (taxesdocid == '0') {
                $("#khathalistdiv").css("display", "none");
                $('#<%=ddlproperty.ClientID %>').get(0).selectedIndex = 0;
            }
            else if (taxesdocid == '4') {
                $("#khathalistdiv").css("display", "none");
                $('#<%=ddlproperty.ClientID %>').get(0).selectedIndex = 0;
                $('#<%=ddlproperty.ClientID %>').css("display", "none");
            }
            else if (taxesdocid == '17') {
                $("#khathalistdiv").css("display", "block");
                $('#<%=ddlproperty.ClientID %>').get(0).selectedIndex = 0;
                $('#<%=ddlproperty.ClientID %>').css("display", "block");
                $("#<%=ddlproperty.ClientID %> option[value='3']").attr("disabled", false);
                $("#<%=ddlproperty.ClientID %> option[value='16']").attr("disabled", false);
                $("#ddlproperty option[value='22']").attr("disabled", true);
            }
            else if (taxesdocid == '20') {
                $("#khathalistdiv").css("display", "block");
                $('#<%=ddlproperty.ClientID %>').get(0).selectedIndex = 0;
                $('#<%=ddlproperty.ClientID %>').css("display", "block");
                $("#ddlproperty option[value='3']").attr("disabled", false);
                $("#ddlproperty option[value='16']").attr("disabled", false);
                $("#ddlproperty option[value='22']").attr("disabled", false);
            }
            else if (taxesdocid == '21') {
                $("#khathalistdiv").css("display", "block");
                $('#ddlproperty').get(0).selectedIndex = 0;
                $('#ddlproperty').css("display", "block");
                $("#ddlproperty option[value='3']").attr("disabled", true);
                $("#ddlproperty option[value='16']").attr("disabled", true);
                $("#ddlproperty option[value='22']").attr("disabled", false);
            }
            else {
                $("#khathalistdiv").css("display", "none");
                $('#<%=ddlproperty.ClientID %>').get(0).selectedIndex = 0;
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="modaldocument" title="Documentation" style="display: none;">
        <div class="form-property__row-item">
            <div class="form-property__group form-group">
                <label for="in-39" class="form-property__label control-label">
                    Ownership</label>
                <asp:DropDownList ID="ddlownership" runat="server" class="form-property__control form-control js-in-select">
                    <asp:ListItem Text="ownership 0" Value="0" />
                    <asp:ListItem Text="ownership 1" Value="1" Selected="True" />
                    <asp:ListItem Text="ownership 2" Value="2" />
                    <asp:ListItem Text="ownership 3" Value="3" />
                </asp:DropDownList>
            </div>
            <div class="form-property__group form-group chosen-search-show">
                <label for="in-40" class="form-property__label control-label">
                    Property Wise Approval</label>
                <asp:DropDownList ID="ddlTaxes" runat="server" class="form-property__control form-control js-in-select"
                    onchange="jsdocument(this.value)">
                    <asp:ListItem Text="Taxes 0" Value="0" />
                    <asp:ListItem Text="Taxes 1" Value="1" />
                    <asp:ListItem Text="Taxes 2" Value="2" />
                    <asp:ListItem Text="Taxes 4" Value="4" />
                    <asp:ListItem Text="Taxes 17" Value="17" />
                    <asp:ListItem Text="Taxes 20" Value="20" />
                    <asp:ListItem Text="Taxes 21" Value="21" />
                </asp:DropDownList>
            </div>
            <div id="khathalistdiv" class="form-property__group form-group">
                <label for="in-41" class="form-property__label control-label" class="form-property__control form-control js-in-select">
                    Khatha</label>
                <asp:DropDownList ID="ddlproperty" runat="server" class="form-property__control form-control js-in-select">
                    <asp:ListItem Text="property 0" Value="0" />
                    <asp:ListItem Text="property 1" Value="1" />
                    <asp:ListItem Text="property 2" Value="2" Selected="True" />
                    <asp:ListItem Text="property 3" Value="3" />
                    <asp:ListItem Text="property 16" Value="16" />
                    <asp:ListItem Text="property 18" Value="18" />
                    <asp:ListItem Text="property 22" Value="22" />
                </asp:DropDownList>
            </div>
        </div>
    </div>
    <asp:Button ID="btnDoc" Text="Show" runat="server" />
    <br />
    </form>
</body>
</html>

Screenshot

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Enable Disable DropDownList option based on another DropDownList value using jQuery

Company

Explore

Follow us

Contact Us