storing selected value and text of dependable dropdown menu

Question

I am using dependable drop-down menu to populate the menu.

First Menu is Country and second menu is city. On selecting the country it auto populates the city.

I am using this tutorial as reference.

I want to store the value and text of selected city as i need it for displaying table based on this.

My First menu is

Country :
<select name="country" class="country">
<option selected="selected">--Select Country--</option>
<?php
include('db.php');
$sql=mysql_query("select id,data from data where weight='1'");
while($row=mysql_fetch_array($sql))
{
$id=$row['id'];
$data=$row['data'];
echo '<option value="'.$id.'">'.$data.'</option>';
} ?>
</select> <br/><br/>

This is my second menu. I want to store value of auto populated item. For this I have used on-change event in my drop-down of city menu as

<select name="city" class="city" onchange="getselectval(this)">
<option selected="selected">--Select City--</option>
</select>

My getselectval() function is

<script type="text/javascript">
 functionn getselectval(ctrl){
      selectval=ctrl.options[ctrl.selectedIndex].value;
      selecttext=ctrl.options[ctrl.selectedIndex].text;
      alert(selectval);
      alert(selecttext);

 }
<script>

After trying this script it alerts value of only selected item in city menu. I am unable to alert the first item which is auto populated . How can I achieve this ?

Any helps are Welcomed .

Answer 1

You can use jQuery here using below code -

remove on change function from select box

<select name="city" class="city">
  <option selected="selected">--Select City--</option>
</select>

bind change event to select box using jQuery and get selected option text and value

$(function(){
  $('select[name=city]').on("change",function(){
   var value = $(this).val();
   var text = $(this).find('option:selected').text();
   alert(value);
   alert(text);
  });
});

Answer 2

Check this Code

only HTML get JS from JSfiddle

<form id="dropdowns" action="index.html">
<label>Country:</label>
<select id="country" name="country">
    <option value="000">-Select Country-</option>
</select>
<br />
<label>State:</label>
<select id="state" name="network">
    <option value="000">-Select State-</option>
</select>
<br />
<label>City:</label>
<select id="model" name="model">
    <option value="000">-Select City-</option>
</select>
<br />