Question

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

即使我选择了第二个选项，我仍然会获得下拉列表的第一个值。

以下是演示：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;
    });

});

我做错了什么？如果选择第二个值并点击按钮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();

点击事件中的

。因为您需要在click事件期间获取所选选项的值。而不是在加载元素期间。

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

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

3 个答案: