如何在 jQuery 中获取选定的下拉值？

Question

我正在尝试从两个下拉列表中获取 selected 值。 但是我的代码只显示下拉列表的第一个值（<option>）。

即使我 select 第二个选项我仍然得到下拉列表的第一个值。

这是演示：https://codepen.io/anon/pen/OMOYGe

这是我的 jQuery:

$(document).ready(function() {
    /* saving selected values in variables */
    var selected_destination = $('.text-one :selected').val();
    var selected_attraction_or_activity = $('.text-two :selected').val();

    /* Showing selected values when the button is clicked*/
    $('#attr_acti_btn').click(function(){
        alert (selected_destination);
        alert (selected_attraction_or_activity);
        document.getElementById("myDiv").innerHTML = selected_destination;
 document.getElementById("attr_or_act_div").innerHTML = selected_attraction_or_activity;
    });

});

我做错了什么？ 如果 select 第二个值并点击按钮 Click to Show!，我如何获得第二个值？

为什么*******我对这个问题投了反对票？ 这个问题有什么问题？

Answer 1

你错过了一个简单的逻辑：

当您更改所选值时，

$('#attr_acti_btn').click(function() {
  var selected_destination = $('.text-one :selected').val();
  var selected_attraction_or_activity = $('.text-two :selected').val();
  alert(selected_destination);
  alert(selected_attraction_or_activity);
  document.getElementById("myDiv").innerHTML = selected_destination;
  document.getElementById("attr_or_act_div").innerHTML = selected_attraction_or_activity;
});

Answer 2

试试这个：

$(document).ready(function() {
    /* saving selected values in variables */

    /* Showing selected values when the button is clicked*/
    $('#attr_acti_btn').click(function(){
  var selected_destination = $('.text-one :selected').val();
    var selected_attraction_or_activity = $('.text-two :selected').val();

        alert (selected_destination);
        alert (selected_attraction_or_activity);
        document.getElementById("myDiv").innerHTML = selected_destination;
 document.getElementById("attr_or_act_div").innerHTML = selected_attraction_or_activity;
    });

});

DEMO

Answer 3

你需要把这些

var selected_destination = $('.text-one :selected').val(); 
var selected_attraction_or_activity = $('.text-two :selected').val(); 

在点击事件中。因为您需要在单击期间获取所选选项的值 event.and 而不是在加载元素期间。

js

$(document).ready(function() {
  /* saving selected values in variables */

  /* Showing selected values when the button is clicked*/
  $('#attr_acti_btn').click(function() {
    var selected_destination = $('.text-one :selected').val();
    var selected_attraction_or_activity = $('.text-two :selected').val();

    alert(selected_destination);
    alert(selected_attraction_or_activity);
    document.getElementById("myDiv").innerHTML = selected_destination;
    document.getElementById("attr_or_act_div").innerHTML = selected_attraction_or_activity;
  });

});

DEMO