How to access value from dynamic drop down list using Javascript/ jquery

Question

I have created a dynamic drop down list. I want to access the value selected from the dynamically created drop down. My HTML file

<!DOCTYPE html>

</head>
<body>
    <table align="center" cellspacing="3" cellpadding="3">
        <tr>
            <td>County Name: </td>
            <td><select id="county"><option value="">Select county</option></select></td>
        </tr>
        <tr>
            <td>City: </td>
            <td><select id="city"><option value="">Select city</option></select></td>
        </tr>
    </table>
    <button  class="btn" onclick="doThis()"">Go</button>
</body>

My js file:

    function doc(id){return document.getElementById(id);}
        function buildCounty(){
            var opts=doc('county').options;
            for(var i=0;i<arr.length;i++){
                opts[opts.length]=new Option(arr[i][0],arr[i][0]);
            }
            doc('county').onchange=function(){
                this.blur();
                var val=this.value;
                if(!val){return;}
                var co=doc('city').options;
                co.length=1;
                for(var j=0;j<arr.length;j++){
                    if(arr[j][0]!==val){continue;}
                    else{
                        var temp=arr[j][1];
                        for(var k=0;k<temp.length;k++){
                            co[co.length]=new Option(temp[k],temp[k]);
                        }
                        break;
                    }
                }
            }
        }
        function doThis(){

        }
        window.onload=buildCounty;
    </script>

On click of the button, doThis() function existing in js file is called. In that function, I want to access the value selected in the 2nd (City list) dropdown.

[Possible duplicate](http://stackoverflow.com/questions/10659097/jquery-get-selected-option-from-dropdown) — Dwhitz, May 19 '17 at 14:13

score 0 · Answer 1 · answered May 19 '17 at 14:16

In jQuery you can do below: I can see that you don't have any value for city option. Was that the reason you were not able to get a value? If yes, then you need to populate the values too in your markup.

function doThis() {
   console.log($('#city').val());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table align="center" cellspacing="3" cellpadding="3">
  <tr>
    <td>County Name: </td>
    <td><select id="county"><option value="">Select county</option></select></td>
  </tr>
  <tr>
    <td>City: </td>
    <td><select id="city"><option value="SomeValue">Select city</option></select></td>
  </tr>
</table>
<button class="btn" onclick="doThis()" ">Go</button>

score 0 · Answer 2 · answered May 19 '17 at 14:58

It looks like you might be able to leverage more of jQuery for this list.

First, in Jquery there is no need for this line:

function doc(id) { document.getElementyById(id); }

You are able to use a CSS selector to get an element using jQuery:

$("#id-of-element");

You can even assign it to a variable:

var countyDropdown = $("#county");

Additionally, one of the "better" ways of running jQuery is to place the script tag at the end of your document and then wait for the document to raise the ready event:

$(document).ready(function () { .... });

Here is a quick codepen I put together that leverages jQuery to dynamically populate a dropdown from the selection in another dropdown. It also sets up the go button to do something when clicked.

codepen-dynamic-dropdown-selection

How to access value from dynamic drop down list using Javascript/ jquery

2 Answers2