Set asp.net dropdown selected value with jQuery

Question

I have a code which should work just fine for setting up a selected value on asp.net dropdownlist but for some reason it doesn't want to work in my case although it works normally in other projects I've been working on.

So this is the dropdown:

  <asp:DropDownList ID="ddlPerc" runat="server">
                             <asp:ListItem Value="">Select Percentage</asp:ListItem>
                             <asp:ListItem Value="0.01">0.01</asp:ListItem>
                             <asp:ListItem Value="0.05">0.05</asp:ListItem>        
                 <asp:ListItem Value="0.1">0.1</asp:ListItem>  
                             <asp:ListItem Value="0.15">0.15</asp:ListItem>
                             <asp:ListItem Value="0.2">0.2</asp:ListItem>    
                             <asp:ListItem Value="0.25">0.25</asp:ListItem>  
                             <asp:ListItem Value="0.3">0.3</asp:ListItem>   
                             <asp:ListItem Value="0.4">0.4</asp:ListItem>                                                                
                             <asp:ListItem Value="0.48">0.48</asp:ListItem>                                                                  
                             <asp:ListItem Value="0.5">0.5</asp:ListItem>
                             <asp:ListItem Value="0.52">0.52</asp:ListItem>      
                             <asp:ListItem Value="0.6">0.6</asp:ListItem>
                             <asp:ListItem Value="0.7">0.7</asp:ListItem>
                             <asp:ListItem Value="0.75">0.75</asp:ListItem>                                                                  
                             <asp:ListItem Value="0.8">0.8</asp:ListItem>                                 
                             <asp:ListItem Value="0.85">0.85</asp:ListItem>    
                             <asp:ListItem Value="0.9">0.9</asp:ListItem>                                 
                             <asp:ListItem Value="0.95">0.95</asp:ListItem>
                             <asp:ListItem Value="0.99">0.99</asp:ListItem>
                             <asp:ListItem Value="1">1</asp:ListItem>
                             </asp:DropDownList>

And the jQuery code which should work is this:

  $(document).on("click", ".open-AddBookDialog", function () {                                       
              var sign = "1";
         $('dropdownAgentPerc option')
        .filter(function () { return $.trim($(this).val()) == sign; })
         .attr('selected', true);
              $('#addBookDialog').modal('show');

When I am checking the source of the page I can see that the value has the tag Selected to true but in the modal popup that value is still not selected. What might be the reason?

Answer 1

Try this,

Add a CssClass to the DropDownList (Eg. ddl), and set value using $(".ddl").val("your_value");

Answer 2

Try

.prop('selected', true);

instead of

.attr('selected', true);