Question

我使用选择框陷入了一项独特的功能。 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>       
</select>

现在我想从这个选择框中创建一个数据值的数组而不选择，LIKE：

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

它将在窗口加载状态下运行，它将在窗口加载后用于另一个下拉动态值。但是我想要一次来自同一属性的数据值。

Answer 1

不确定您想要什么，但您可以遍历选择列表中的每个选项，如果该值尚未在数组中 - 将该数据推送到数组中。如果你想要推送所有这些 - 删除indexOf并按下每个dataAtt。

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

Answer 2

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>

如果不在arr

上添加，请使用$.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的选项

Answer 3

您可以将forEach方法调用到这样的对象，而不是使用jQuery：

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;
}

如何从选择框中的选项获取属性值

4 个答案: