jQuery - 如何在使用jQuery元素变量时获得选择的选项？

Question

我知道我可以得到所选元素的值,如下所示:

console.log(
    jQuery('.foo select option:selected').val()
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo">
  <select>
    <option>A</option>
    <option>B</option>
    <option selected>C</option>
    <option>D</option>
  </select>
</div>

但是,如果我使用选项初始化变量,它是如何工作的？我试过这样,但没有成功:

var $option = jQuery('.foo select option');

console.log(
    $option.find("selected").val()
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo">
  <select>
    <option>A</option>
    <option>B</option>
    <option selected>C</option>
    <option>D</option>
  </select>
</div>

Answer 1

这将过滤掉所选项目:

var $option = $(".foo select option");
console.log(
  $option.filter(':selected').val()
);  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo">
  <select>
    <option>A</option>
    <option>B</option>
    <option selected>C</option>
    <option>D</option>
  </select>
</div>

$option返回一个jQuery元素数组,因此您需要一个额外的步骤来推断选择了哪一个.在这种情况下,find查看每个$option元素,而不是检查哪个元素具有所选属性.