Question

假设我有这样的代码：

<select id="select" multiple="multiple">
 <option value="A1">abc</option>
 <option value="A2">cde</option>
 <option value="A3">efg</option>
</select>

一个数组：

var selected = ["A1", "A3"];

我想遍历selected数组以获取包含具有适当值的选项标记文本的第二个数组。值是唯一的：

var texts = [ "abc", "efg" ];

如何在jquery中实现呢？

Answer 1

可以使用:selected选择器查找所选选项，使用map（）创建数组

var texts = $('#select option:selected').map(function(){
  return $(this).text()
}).get();

或者在迭代selected数组

时使用属性选择器

var $opts = $('#select option')
var texts = selected.map(function(val){
  return $opts.filter('[value="' + val + '"]').text()
});

Answer 2

使用attribute equals selector使用value属性获取元素，并使用map()方法生成数组。使用Array#join方法生成单个选择器以避免迭代数组。

＆＃13;

var selected = ["A1", "A3"];

var res = $('[value="' + selected.join('"],[value="') + '"]').map(function() {
  return this.text; // or $(this).text();
}).get();

console.log(res);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select" multiple="multiple">
  <option value="A1">abc</option>
  <option value="A2">cde</option>
  <option value="A3">efg</option>
</select>

＆＃13;

如果您尝试获取所选元素文本，请使用:selected伪类选择器。

＆＃13;

var res = $('select option:selected').map(function() {
  return this.text; // or $(this).text();
}).get();

console.log(res);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select" multiple="multiple">
  <option value="A1" selected>abc</option>
  <option value="A2">cde</option>
  <option value="A3" selected>efg</option>
</select>

＆＃13;

Answer 3

您可以使用属性＆＃34; value＆＃34;选项选择器：

    var selected = ["A1", "A3"];
    var text= [];
    for(var i=0; i < selected.length; i++) {
        text.push($('#select option[value=' + selected[i] + ']').text());
    }

如何获得选项文本只知道它的价值

3 个答案: