jquery获取select的值

Question

我有一些看起来像这样的HTML：

<div class="MyClass"></div>
<div class="MyClass"></div>
<div class="MyClass"></div>

<div class="MyClass">
....stuff
  <select>
    <option value="1">blahblah</option>
    <option value="2">blahblah</option>
  </select>
</div>

<div class="MyClass">
....stuff
  <select>
    <option value="5">blahblah</option>
    <option value="10">blahblah</option>
  </select>
</div>

正如你所看到的，我有几个类MyClass的div，其中一些div里面有一个选择框。

我有以下用于触发事件的javascript：

$(document).ready(function () { 
  $('.MyClass').click(function () { DoThing($(this)); }); 
});

DoThing功能如下所示：

function DoThing(TheDiv) {
  var Value = parseInt(TheDiv.find(select).val());
  alert(Value);
}

这是我正在努力的部分：我如何找到所选择的选择的值？目前，它仅提醒1。

感谢您的建议。

Answer 1

描述

您应该使用jQuery的:selected选择器来获取所选的选项。

查看我的示例和此jsFiddle Demonstration

示例

<强> HTML

  <select id="firstSelect">
    <option value="5">blahblah</option>
    <option selected="true" value="10">blahblah</option>
  </select>
  <select id="secondSelect">
    <option value="5">blahblah</option>
    <option selected="true" value="14">blahblah</option>
  </select>
  <select id="thirdSelect">
    <option value="5">blahblah</option>
    <option selected="true" value="20">blahblah</option>
  </select>

<强>的jQuery

alert($("#firstSelect option:selected").val());
alert($("#secondSelect option:selected").val());
alert($("#thirdSelect option:selected").val());

更多信息

• jsFiddle Demonstration
• jQuery :selected Selector
• jQuery.val()

Answer 2

var selectedValues = [];    
$("select option:selected").each(function () {
   selectedValues.push(parseInt($(this).val(), 10));
});

Answer 3

使用select option:selected将返回所需的结果：

function DoThing(TheDiv) {
    var Value = TheDiv.find('select option:selected').val();
    alert(Value);
}

DoThing在第一个)之前遗漏了;。

Answer 4

以下是我将如何做到这一点（假设每select只有一个.MyClass）：

$(document).ready(function () { 
    $('.MyClass').click(function() {
        val = $('select', this).val();
        alert(val);
    }); 
});

奖金：The working jsFiddle

---

修改

此外，Betard Fooser的评论绝对值得注意。绑定处理程序的更好方法是：

$(document).ready(function () { 
    $('.MyClass select').change(function() {
        val = $(this).val();
        alert(val);
    }); 
});

---

无需从这里继续阅读，只是一个错误抓住了

此外，您的绑定缺少结束括号，因此无效：

$(document).ready(function () { 
  $('.MyClass').click(function () { DoThing($(this); });
//                                                 ^
//                                Missing ")" here |
});

所以，如果你试试

$(document).ready(function () { 
  $('.MyClass').click(function () { DoThing($(this)); }); 
});

相反，事情应该很好。