Question

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

选择一个国家/地区（比方说英国）
点击它选择一个城市（例如伦敦），然后选择曼彻斯特，再选择伦敦，最后选择利兹（伦敦 - ＆gt;曼彻斯特 - ＆gt;伦敦 - ＆gt;利兹）。

**两个城市下拉菜单和＆＃34;添加＆＃34;按钮是未来的DOM元素，所以我使用委托。

执行此操作时，我将在FIRST console.log中获得以下结果：

1

2

1

3

我按下＆＃34;添加＆＃34;按钮我在SECOND console.log中看到以下结果：

1

2

1

3

我的问题是它发送了之前选择的所有值，直到我按下＆＃34;添加＆＃34;按钮而不是仅发送最后选择的值（值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

            }
        );

   }); 
});

Answer 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>

希望这有帮助，

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

1 个答案: