如何從DropDown中的選定選項獲取title屬性的值

Question

我有一個html select元素，其中包括三個option元素。 我已經編寫了一個jQuery代碼，該代碼為我提供了當前所選選項元素的標題屬性值，並將該值保存在一個變量中（即時！）。

但是我想從一個選項值中讀取一個title屬性，該屬性不是動態選擇的，並且如果該頁面是第一次加載的，則已經在我的xhtml頁面中顯示為選擇的值。

這是我的jQuery代碼，第二個代碼行無法正常工作：

$(document).ready(function(){

   var optionElements = jQuery(jQuerySelektorHTMLSelectElement).children();
   var OptionField = optionElements.find("[value=" + selectedValue + "]");
   var OptionFieldTitleAttribut = OptionFeld.attr("title"); 

}

如果加載了xhtml頁面，如何找到未即時選擇但被選擇的option元素？

Answer 1

如果您的變量jQuerySelektorHTMLSelectElement是良好的命名，你不必叫children ：

var selectElement = $(jQuerySelektorHTMLSelectElement); // <- remove children here
var OptionField = selectElement.find("[value=" + selectedValue + "]");
var OptionFieldTitleAttribut = OptionField.attr("title"); 

find方法已經在子級中尋找選擇器...

看到這個小提琴 。

Answer 2

嘗試這個：

HTML

<select id="test">
    <option customAttr="a">test1</option>
    <option customAttr="b">test2</option>
    <option customAttr="c" selected="selected">test3</option>
    <option customAttr="d">test4</option>
</select>

JS

$(function(){
  console.log($("#test").find("option:selected").attr("customAttr"));
});

小提琴