從div開始選擇下拉文本的正確方法是什麼？

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一個孩子，而我的將獲得第一選擇的選項，這將是想必在編號1

所以這個故事的寓意是做哪個選擇做你真正想要什麼:)

Answer 2

我會做這一個：

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

我並不確切，其計算策略是 「正確的」 知道了。我認爲我的理解很簡單。所以去找一個你認爲容易閱讀的人。如果性能是必要的使用純粹的JavaScript，並讓選擇有一個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()