Change asp:DropDownList default selected value with Jquery

Question

I have a asp:DropDownList control in a hidden popup, this popup is activated when the user clicks on an icon(image) on a row of a Gridview Control.

Then i use some jquery to select the row that's been clicked on and then i extract the values of the label controls on the gridview row and then want to populate the popup fields (Text box controls and the DropDown list controls default value), the idea being to use them to update the record in the row in the database.

The issue im having is populating the default selection in the dropdown control on the popup. I can populate the text boxes in the textboxes, just not the dropdown.

Here is the markup for one of the textboxes and the ddl from the gridview where i source my values:

        <asp:TemplateField HeaderText="Current Stage"> 
    <ItemTemplate> 
        <asp:Label ID="lblCurrentStage" CssClass="clCurrentStage" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "CurrentStage")%>' ToolTip ='<%# DataBinder.Eval(Container.DataItem, "CurrentStage")%>'></asp:Label>
    </ItemTemplate>
    </asp:TemplateField>
    <asp:TemplateField HeaderText="Review Date"> 
    <ItemTemplate> 
        <asp:Label ID="lblReviewDate" CssClass="clReviewDate" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "ReviewDate")%>' ToolTip ='<%# DataBinder.Eval(Container.DataItem, "ReviewDate")%>'></asp:Label>
    </ItemTemplate> 
</asp:TemplateField> 

and here is the code that works fine on the textbox but not on the ddl:

        <div id="PopUpTrackerEditFieldCurrentStage">
    <div class="clEditFieldCurrentStageContainer">
    <asp:DropDownList ID="ddlPopUpEditCurrentStage" runat="server"> </asp:DropDownList>
    </div>
</div>
<div id="PopUpTrackerEditFieldReviewDate">
    <div class="clEditFieldReviewDateContainer">
    <asp:TextBox ID="tbPopUpEditReviewDate"  CssClass="clPopUpDateFieldsInEdit" runat="server" Text=""  ToolTip =""></asp:TextBox>
    </div>
</div>

And here is jquery used to populate the textbox and dropdown list:

//Store the current row being edited
var row = $(this).closest("tr");
//Get the existing Comments into a string
var strCurrentStage = $(".clCurrentStage", row).text();
//Add the any existing Comments
$("#<%=ddlPopUpEditCurrentStage.ClientID%>").val(strCurrentStage);
//Dynamically add the text to the tooltip 
$("#<%=ddlPopUpEditCurrentStage.ClientID%>").attr('title', 'Click to select the current stage here for ' + strPSTNNum);
//Get the existing Review Date into a string
var strReviewDate = $(".clReviewDate", row).text();
//Add the any existing Review Date
$("#<%=tbPopUpEditReviewDate.ClientID%>").val(strReviewDate);
//Dynamically add the text to the tooltip 
$("#<%=tbPopUpEditReviewDate.ClientID%>").attr('title', 'Edit the review date here for ' + strPSTNNum);

I know strCurrentStage is ok because i temporaraly used it to populate the textbox to see if it contained the current stage text from the current stage label in the gridview and it did. So the issue i think is that i cannot select the correct part of the dropdown list control to populate the default value in.

Answer 1

Try without the selected selector. Like that you are trying to set the selected value to selected:

//Store the current row being edited
var row = $(this).closest("tr");            

//Get the existing Comments into a string from the label in the gridview
var strCurrentStage = $(".clCurrentStage", row).text();

//Add the current stage selected value to the ddl control
$("#<%=ddlPopUpCurrentStage.ClientID%>").val(strCurrentStage);

Answer 2

For the benefit of others the only way that i managed to sort this in the end was to create a functions that went off and got the slections from the database and then just below the section that populated the sections, i then added the code to the bottom of that function just before it completes. The reason i suspect was that when the OP code was trying to add the dropdown and put in a default value, the DOM had already seen a change, i confirmed this by using the jquery "Live('mousover',blaa) " on the containing div and it then worked. anyway the below is the code:

function getListOfStages() {
    var ddlCurrentStages = $("#<%=ddlPopUpEditCurrentStage.ClientID%>");
    $.ajax({
        type: "POST",
        url: "PSTN_OrderManagementTracker.aspx/PopCurrentStagesddl",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            var xmlDoc = $.parseXML(response.d);
            var xml = $(xmlDoc);
            var CurrentStagesReturned = xml.find("Table");
            //for each current stage from the database, add it to the dropdown list on the modal
            $.each(CurrentStagesReturned, function (index, CurrentStagesReturned) {
                dbCurrentStageName = $(this).find("CurrentStage").text()
                ddlCurrentStages.append('<option>' + dbCurrentStageName + '</option>');
                //Get the this records existing current stage into a string
                var strCurrentStage = $(".clCurrentStage", row).text();
                //Add the existing current stage for that record as the default one showing
                $("select#<%=ddlPopUpEditCurrentStage.ClientID%>").val(strCurrentStage);

            });
        },
        failure: function (msg) {
            alert(msg);
        }
    });
}

Answer 3

$（'＃<％= ddlPopUpCurrentStage.ClientID％>选项：已选择'）.val（strCurrentStage）