从下拉菜单发送最后选择的值

Question

I have a problem when selecting an option from a drop down menu. The concept goes like this:

1. Select a country (lets say UK)
2. Select a city by clicking on it(ex. London), then select Manchester, then London again and finally select Leeds ( London -> Manchester -> London -> Leeds).

**Both city drop down menu and "Add" button are future DOM elements, so i use delegation.

While doing this i will get the following results in FIRST console.log :

1

2

1

3

3. As soon as i press the "Add" button i see the following results in SECOND console.log :

1

2

1

3

My problem is that it sends all the values previously selected until i press the "Add" button instead of sending just the last selected value (value 3).

What do i do wrong?

Thanks!

code below:

<select id="city" name="city">
     <option value="1">London</option>
     <option value="2">Manchester</option>
     <option value="3">Leeds</option>
</select>

<button type="button" id="addToDatabase">Add</button>

$(document).on('change','select#city',function(){

   var cityID = $('select#city').val();

   console.log(cityID); //first console.log

   $(document).on('click','#addToDatabase',function(){

       console.log(cityID);//second console.log

       $.post('js/ajax/addtodatabase.php', {cityID: cityID},

           function(output){

               console.log(output);//third console.log

            }
        );

   }); 
});

Answer 1

Try without nesting your functions as follows, an in the second function use $('#city').val() instead of cityId var since now they are not nested:

 $(document).on('change','select#city',function(){ var cityID = $(this).val(); console.log(cityID); //first console.log }); $(document).on('click','#addToDatabase',function(){ console.log($('#city').val());//second console.log $.post('js/ajax/addtodatabase.php', {cityID: $('#city').val()}, function(output){ console.log(output);//third console.log } ); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <select id="city" name="city"> <option value="1">London</option> <option value="2">Manchester</option> <option value="3">Leeds</option> </select> <button type="button" id="addToDatabase">Add</button> 

Hope this helps,