如何從選擇框中的選項中獲取屬性值

Question

s我被困在使用選擇框的獨特功能之一中。 HTML是這樣的：

<select name="hello" id="hello" > 
    <option selected="selected" value="Please Select">Please Select</option> 
    <option data-att="one">abc</option> 
    <option data-att="one">sd</option> 
    <option data-att="one">wer</option> 
    <option data-att="two">uio</option> 
    <option data-att="two">abc</option> 
    <option data-att="two">sd</option> 
    <option data-att="three">wer</option> 
    <option data-att="three">tyu</option>  

現在我想使該數據ATT值陣列從這個選擇框沒有選擇，如：

var arr = new Array(); arr=['one','two','three'];

它將運行窗口加載狀態，它將用於窗口加載後的另一個下拉動態值。但我想要一次來自同一個屬性的數據值。 提前致謝，儘快給予有效答覆。

Answer 1

var arr=[]; 
 
$('#hello option').each(function(){ 
 
    if($.inArray($(this).attr('data-att'), arr) == -1) { //check if id value not exits than add it 
 
    arr.push($(this).attr('data-att')) 
 
    
 
    } 
 

 

 
}) 
 
console.log(arr)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name="hello" id="hello"> 
 
    <option selected="selected" value="Please Select">Please Select</option> 
 
    <option data-att="one">abc</option> 
 
    <option data-att="one">sd</option> 
 
    <option data-att="one">wer</option> 
 
    <option data-att="two">uio</option> 
 
    <option data-att="two">abc</option> 
 
    <option data-att="two">sd</option> 
 
    <option data-att="three">wer</option> 
 
    <option data-att="three">tyu</option> 
 
</select>

使用$.inArray()檢查值在數組中存在如果不改編加

會給你[undefined, "one", "two", "three"]

var arr = []; 
 
$('#hello option').each(function() { 
 
    if ($(this).attr('data-att')) { 
 
    if ($.inArray($(this).attr('data-att'), arr) == -1) { //check if id value not exits than add it 
 
     arr.push($(this).attr('data-att')) 
 

 
    } 
 
    } 
 

 

 

 
}) 
 
console.log(arr)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name="hello" id="hello"> 
 
    <option selected="selected" value="Please Select">Please Select</option> 
 
    <option data-att="one">abc</option> 
 
    <option data-att="one">sd</option> 
 
    <option data-att="one">wer</option> 
 
    <option data-att="two">uio</option> 
 
    <option data-att="two">abc</option> 
 
    <option data-att="two">sd</option> 
 
    <option data-att="three">wer</option> 
 
    <option data-att="three">tyu</option> 
 
</select>

您可以添加額外的if語句，以確保只使用attr data-att會使用jQuery你可以調用在foreach方法來像這樣的對象進行計數

Answer 2

不確定你想要什麼，但你可以遍歷選擇列表中的每個選項，如果該值還沒有在數組中 - 將該數據att推入一個數組。如果你希望所有這些都被推送 - 刪除indexOf，並推送每個dataAtt。

var newArray=[]; 
$('#hello option').each(function(){ 
    var dataAtt = $(this).attr('data-att'); 
    if(newArray.indexOf(dataAtt == -1){ 
     newArray.push(dataAtt)}; 
}) 

Answer 3

相反的選擇：

var options = document.querySelectorAll("#hello option"); 
var attributes = []; 

Array.prototype.forEach.call(options, function(item, index, array){ 
    attributes.push(item.getAttribute('data-att')); 
}); 

console.log(attributes); 

Answer 4

你可以很容易地使用jquery map函數在單行中完成這件事，這個東西充當每次函數，其中值每次都被添加到數組中，並且最終打印這些東西...

var arr = $.map($('#hello option'), function (item, index) { return $(item).attr('data-att') }); 

console.log(uniqueArr(arr)); 


function uniqueArr(arr) { 
var result = []; 
$.each(arr, function(i, e) { 
    if ($.inArray(e, result) == -1) result.push(e); 
}); 
return result; 
}