Get selected text from drop-down list asp.net

Question

How can I get selected text from drop-down list? Before crucifying me for asking a duplicate, I have read: Get selected text from a drop-down list (select box) using jQuery and Get selected text from a drop-down list (select box) using jQuery and tried the following code variations from these pages:

<asp:DropDownList ID="DDLSuburb" runat="server">
</asp:DropDownList>

alert($get("[id*='DDLsuburb'] :selected"));
alert($("[id*='DDLsuburb'] :selected"));
alert($get("#DDLsuburb option:selected"));
alert($get("DDLsuburb option:selected"));
alert($get("#DDLsuburb :selected").text());
alert($get("DDLsuburb :selected").text());
alert($get("DDLSuburb", Text));
alert($get(DDLSuburb, Text).toString());
alert($get("DDLSuburb", Text).toString());
alert($get("DDLSuburb").html());
alert($get("DDLSuburb :selected").html());
alert($get("DDLSuburb option:selected").html());
alert($get(DDLSuburb).textContent());
alert($get(DDLSuburb).innerHTML());
alert($get(DDLSuburb).innerHTML.toString());
alert($get("DDLSuburb").text());
alert($get("DDLSuburb").valueOf("DDLSuburb"));
alert($get("DDLSuburb").valueOf());

Notes: 1. I am using alert for troubleshooting. 2. I know the first part should be ($get("DDLSuburb"), as opposed to the options without quotes. Visual Studio 2015, ASP.net.

Edit: Trying to raise the alert via button click:

<input type="button" value="Get Postcode" onclick="onClick()" />
 <script type="text/javascript">
    var onClick = function () {
        alert($get("DDLSuburb")...);
        }

VDWWD · Accepted Answer · 2016-09-13T17:26:11.397

5

Try

<script type="text/javascript">
    $(document).ready(function () {
        $("#<%=DDLSuburb.ClientID %>").change(function (e) {
            alert($("#<%=DDLSuburb.ClientID %> option:selected").text());
        });
    });
</script>

The reason <%=DDLSuburb.ClientID %> is used is because in the HTML the ID DDLSuburb is translated into something like ctl00$mainContentPane$DDLSuburb to ensure unique ID's on the page. That's why your JavaScript cannot find it.

Or you can use the property ClientIDMode="Static" in the DropDown to keep the ID name the same in the HTML, but I do not recommend this.

edited Sep 13 '16 at 17:26

answered Sep 13 '16 at 17:14

VDWWD

35,079
22
62
79

Thanks for the suggestion, received this error in Chrome: `Uncaught TypeError: Cannot read property 'text' of null` – 009 Sep 13 '16 at 17:18
It works here, in Chrome, FF etc. Check if there are no spelling errors. – VDWWD Sep 13 '16 at 17:23
Sorry, should have mentioned I was using a button click to raise the alert window. I copied and pasted exactly what you wrote. I receive this error: `Uncaught TypeError: $ is not a function`. Also, I had to write `alert($get...`or I would get a null error (this is the only part I changed) – 009 Sep 13 '16 at 17:37
Do you have jQuery on your page? And if so try replacing the `$` with `jQuery` like `jQuery(document).ready` – VDWWD Sep 13 '16 at 17:44
I apologise but we haven't been taught jquery (it hasn't even been mentioned). We are supposed to be using ASP.net AJAX to call a web service and use a drop down list selection for the call. The only syntax we've been shown is a basic calculator using $get and other simple commands. When I replace `DDLSuburb...` with a string my method call works – 009 Sep 13 '16 at 17:57
1

No problem, we are here to help and learn. Add this line in the `` of the HTML page ``. For more info visit http://jquery.com/ – VDWWD Sep 13 '16 at 18:03
An alternative would be to do it in pure Javascript. – ConnorsFan Sep 13 '16 at 18:05
TY VDWWD, I had an issue copying and pasting your api call into asp.net, I received this 404 in browser: https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jque%E2%80%8C%E2%80%8Bry.min.js . With some assistance, I was able to fix the 404 by typing the call manually, and now it is working beautifully. – 009 Sep 14 '16 at 04:41

score 2 · Answer 2 · answered Sep 13 '16 at 18:06

this code use for show selected item by using jQuery. ddlItem is a id of dropdownlist.

<script>
    $(document).ready(function () {
        $("#ddlItem").change(function () {
            var ddlItem = document.getElementById("<%= ddlItem.ClientID %>");
            var selectedText1= ddlItem.options[ddlItem.selectedIndex].innerHTML;

            alert("You selected :" + selectedText1);

        });
    });
</script>

Get selected text from drop-down list asp.net

2 Answers2