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

【问题标题】：Sending last selected value from drop down menu从下拉菜单发送最后选择的值
【发布时间】：2015-03-23 23:03:35
【问题描述】：

从下拉菜单中选择选项时遇到问题。这个概念是这样的：

选择一个国家（比如说英国）
通过单击选择一个城市（例如伦敦），然后选择曼彻斯特，然后再次选择伦敦，最后选择利兹（伦敦 -> 曼彻斯特 -> 伦敦 -> 利兹）。

**城市下拉菜单和“添加”按钮都是未来的 DOM 元素，所以我使用委托。

这样做时，我将在 FIRST console.log 中得到以下结果：

1

2

1

3

按下“添加”按钮后，我会在 SECOND console.log 中看到以下结果：

1

2

1

3

我的问题是它会发送之前选择的所有值，直到我按下“添加”按钮，而不是只发送最后一个选择的值（值 3）。

我做错了什么？

谢谢！

代码如下：

<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

            }
        );

   }); 
});

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

尝试不嵌套您的函数，如下所示，在第二个函数中使用 $('#city').val() 而不是 cityId var，因为现在它们没有嵌套：

$(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>

希望这会有所帮助，

【讨论】：