使用jquery选择所选元素的选项值

Question

我正在尝试使用jquery在html下拉列表中选择所选元素的选项值。

HTML

<select class="select1">
    <option value ="0">" + state.greens[0].name + "</option>
    <option value ="1">" + state.greens[1].name + "</option>
    <option value ="2">" + state.greens[2].name + "</option>
</select>

选项值表示数组中的索引位置，我可以加载该位置以生成有关其中对象的其他数据。

我正在尝试使用jquery来获取当前选择的任何下拉元素的选项值。

现在我正在使用此代码，但它无效：

JQUERY

var a = $(".select1 option:selected");

然而，它并没有带回“1”，“2”，“3”等。

当我运行console.log（a）时，我得到以下内容：

不确定发生了什么。

我的想法是我可以使用变量a加载数据，如state.greens [a] .price，state.greens [a] .ingredients等。

Answer 1

你快到了。请给：

var a = $(".select1 option:selected").attr("value");

或者说：

var a = $(".select1").val();

您需要获取<select>的价值。

Answer 2

var a = $(".select1").val(); // is the simple solution

Answer 3

试试这个..

HTML

<select class="select1" id="select1">
    <option value ="0">Option 1</option>
    <option value ="1">Option 2</option>
    <option value ="2">Option 3</option>
</select>

纯Javascript解决方案

document.getElementById("select1").addEventListener("change", function(){
    var a = document.getElementById("select1").value;

   alert(a);
});

查看此Fiddle

<强>段

document.getElementById("select1").addEventListener("change", function(){
    var a = document.getElementById("select1").value;

   alert(a);
});

<select class="select1" id="select1">
    <option value ="0">Option 1</option>
    <option value ="1">Option 2</option>
    <option valuae ="2">Option 3</option>
</select>