从div开始在jQuery中选择下拉文本的正确方法是什么？

Question

我正在从div数组中动态抓取选定的下拉选项的文本。当我这样做时：

$("#divID").children("select").eq(0).find('option:selected').text();

一切正常。但是，当我这样做时：

$("#divID").children("select option:selected").eq(0).text();

它没有按预期获取文本。我想知道后一种获取文本的方法我做错了什么。感谢。

JSFiddle - First Approach (Works)

JSFiddle - Second Approach (Doesn't Work)

Answer 1

您正在做的问题是您使用children。

如果您要将children更改为find，那么它的效果非常好。原因是children仅查找作为该集合的直接子节点的元素。因此它只会返回#divID的直接子项。如您所见，option元素不是直接子元素，因此无法返回。

$("#divID").find("select option:selected").eq(0).text();

请参阅http://jsfiddle.net/nzhaD/5/

当然，这两者之间存在一些细微差别。 Cosnider这个HTML：

<div id="divLocation">
    <div>            
        <select id="1"/>
    </div>
    <select id="2"/>
</div>

我已经删除了选项，但是你的原始选择器会获得id＃2（因为它是#divLocation的唯一选择，而我的选择将是第一个选择在id＃1中。

故事的寓意是做任何选择器做你真正想要的。 ：）

Answer 2

我会做到这一点：

    value = $("#divLocation select option:selected").text();

我不确切知道哪个approch是“正确的”。我觉得我很容易理解。所以选择你认为容易阅读的那个。如果需要性能，请使用纯javascript并让select具有ID。

document.getElementById("divLocationSelect").value;

http://jsfiddle.net/nzhaD/4/

Answer 3

你可以这样做：

$("#divID").find("select option:selected").eq(0).text();

.children()方法与.find()的不同之处在于.children()只在DOM树中向下移动一个级别，而.find()可以遍历多个级别以选择后代元素（孙子级）等等。）

请参阅.children()