выпадающий список не включен при изменении другого раскрывающегося списка для первого раза с использованием javascript

Question

Я использую два раскрывающихся списка на моей странице asp.net .. В этом я хочу изменить ddl2 на основе значения ddl1 .. My дизайн кодирование приведено ниже ..

<asp:DropDownList ID="ddl1" runat="server" Width="158px" TabIndex="1"> 
    <asp:ListItem value="0">Please select</asp:ListItem> 
    <asp:ListItem value="1">one</asp:ListItem> 
    <asp:ListItem value="2">two</asp:ListItem> 
    <asp:ListItem value="3">three</asp:ListItem> 
</asp:DropDownList> 

<asp:DropDownList ID="ddl2" runat="server" Width="158px" TabIndex="1"> 
    <asp:ListItem value="1">one selected</asp:ListItem> 
    <asp:ListItem value="2">two selected</asp:ListItem> 
    <asp:ListItem value="3">three selected</asp:ListItem> 
</asp:DropDownList> 

Я написал код в JavaScript, что на основе ddl1 значения, ddl2 значения должно быть изменено .. Первоначально на странице загрузки ddl2 отключено .. После изменения ddl1 только ddl2 будет включен и изменен в соответствии с ddl1 ..

$('#<%=ddl1.ClientID %>').change(function() { 

var val =$('#<%=ddl1.ClientID %> option:selected').val(); 
if (val == "0") 
{    
    $('#<%=ddl2.ClientID %>').attr('disabled', true); 
} 
else 
{ 
    $('#<%=ddl2.ClientID %>').attr('disabled', false);    
} 
); 

Моя проблема в том, что после загрузки страницы, когда я c hange ddl1 для первого элемента, ddl2 не активируется. После изменения ddl1 включается только ddl2 и изменяется его значение.

Answer 1

Попробуйте с этим

$('#<%=ddl1.ClientID %>').on('change',function() { 

var val =$('#<%=ddl1.ClientID %> option:selected').val(); 
if (val == "0") 
{    
    $('#<%=ddl2.ClientID %>').attr('disabled', true); 
} 
else 
{ 
    $('#<%=ddl2.ClientID %>').attr('disabled', false);    
} 
}); 

DEMO

Answer 2

Что я вижу на первом глазу - вы потеряли один } в своем javascript: попробовать это:

$('#<%=ddl1.ClientID %>').change(function() { 

var val =$('#<%=ddl1.ClientID %> option:selected').val(); 
if (val == "0") 
{    
    $('#<%=ddl2.ClientID %>').attr('disabled', true); 
} 
else 
{ 
    $('#<%=ddl2.ClientID %>').attr('disabled', false);    
} 
} // it was lost 
); 

, а также использовать не true и false, но disabled="disabled" получить контроль отключен