Question

I’m trying to add 2 drop down lists to a popup. but I am having trouble.

I have a function called “showMessage” that creates a popup.

so: showMessage(“hello”); will create a popup with the words “hello”. Now my question is how could I add 2 dropdownlists to it. I’ve tried creating a div with 2 dropdownlists then doing
showMessage(document.getElemenyBiId(ddl)); But I know that’s not right.

here is my “showMessage” function:

function showMessage(msg, title, onOk) {
if (title === undefined)
    title = "";

if (onOk === undefined)
    onOk = function () {
        $(this).dialog('close');
    }

$('<div>').dialog({
    title: title,
    height: 'auto',
    width: '250',
    open: function () {
        $(this).html(msg);
    },
    buttons: {
        Ok: onOk
    },
    close: function () {
        $(this).remove();
    }
});

}

and here is my dropdownList div:

<div id="newExpenseTypeDialog" style="display:none;">
        <label>Select new CaseFile:</label>
        <asp:DropDownList runat="server" ID="ddlCaseFiles" DataSourceID="dsMyCaseFiles" DataTextField="Display" DataValueField="FileID" OnPreRender="ddl_PreRender" Width="524px" />
</div>

javascript function I have to where I am trying to get a popup to load 2 dropdownlists and then getting a user to select an id from both then have it pass the 2 values to the function to do what I want it to do.

function moveCasefile(isMovePossible) {
        //var newCaseFileID;
        //var oldCaseFileID;
         //this area I am trying to get the popup to happen and get the input from the user via dropdownLists.
        if (newCaseFileID || oldCaseFileID) {
            //alert(ans);

            var selectedExpensesList = getSelectedExpenseIDs();
            if (selectedExpensesList.length > 0) {
                $.ajax({
                    type: "POST",
                    //url: "/Tasks/ViewTasks.aspx/deleteTasksAndLinkedItems",
                    url: '<%=ResolveUrl("~/Expenses/ViewExpenses.aspx/moveNewCaseFile")%>',
                    data: "{'MoveCaseFile' : '" + isMovePossible + "','ExpId': ['" + selectedExpensesList.join('\',\'') + "'],'newCaseFileID': '" +
                    newCaseFileID + "', 'oldCaseFileID': '" + oldCaseFileID + "'}",
                    //dataaaaaa`

My div with the DropDownLists:

<div id="newExpenseTypeDialog" style="display:none;">
        <label>Select new CaseFile:</label>
        <asp:DropDownList runat="server" ID="ddlCaseFiles" DataSourceID="dsMyCaseFiles" DataTextField="Display" DataValueField="FileID" OnPreRender="ddl_PreRender" Width="524px" />
        <asp:DropDownList runat="server" ID="ddlCaseFiles2" DataSourceID="dsMyCaseFiles" DataTextField="Display" DataValueField="FileID" OnPreRender="ddl_PreRender" Width="524px" />
</div>

My DropdownLists data source:

<asp:SqlDataSource ID="dsMyCaseFiles" runat="server" ConnectionString="<%$ ConnectionStrings:OSCIDConnectionString %>" ProviderName="System.Data.SqlClient" SelectCommand="p_CaseFiles_ListActiveCaseFilesAssignedTo" SelectCommandType="StoredProcedure">
    <SelectParameters>
        <asp:SessionParameter Name="InvestigatorID" SessionField="InvestigatorID" />
        <asp:SessionParameter Name="AssignedTo" SessionField="InvestigatorID" />
    </SelectParameters>
</asp:SqlDataSource>

And my Codebehind for “pre_render”:

 protected void ddl_PreRender(object sender, EventArgs e)
{
    DropDownList ddl = (DropDownList)sender;
    try
    {
        if (ddl.Items[0].Value != "-1")
            ddl.Items.Insert(0, new ListItem("--Select--", "-1"));
    }
    catch
    {
        ddl.Items.Insert(0, new ListItem("--Select--", "-1"));
    }
}

Answer 1

You can call that function on Select Index Change like this:-

<asp:DropDownList ID="ddl" runat="server"  AutoPostBack="true" onchange="javascript:showMessage();" OnSelectedIndexChanged="ddl_SelectedIndexChanged"></asp:DropDownList>

And on DropDown Databound event you can write as:

 protected void ddl_DataBound(object sender, EventArgs e)
{
    ddl.Items.Insert(0, new ListItem("Select new CaseFile:", "-1"));
}

To get the Value :-

var e = document.getElementById("ddl");
var strUser = e.options[e.selectedIndex].value;

If you selected dropdown text:-

var e = document.getElementById("ddl");
var strUser = e.options[e.selectedIndex].text;