如何获取仅知道其价值的选项文本

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

使用attribute equals selector to get elements using value attribute and generate the array using map() method. Where use Array#join方法生成单个选择器以避免在数组上迭代。

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

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

console.log(res);

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

如果您尝试获取所选元素的文本，请使用 :selected pseudo-class 选择器。

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

console.log(res);

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

Answer 2

可以使用 :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 3

您可以使用属性 "value" 选择器选项：

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

如何获取仅知道其价值的选项文本

how to get text of option knowing just its value

javascript

jquery

select

text

option