Question

我有一个菜单。给定给定值，我想返回文本。例如，0将返回“0”，1将返回“1”等。请注意，我不关心当前选择哪个选项，也不想自动选择菜单，但只想使用选择菜单原始数据库。这可以通过JavaScript或jQuery轻松完成而无需迭代每个选项吗？

<select>
<option value="0">zero</option>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>

由于

Answer 1

不是使用select作为数据库（需要昂贵的操作进行简单查找），而是从中创建一个数据集，然后使用...

var vals = $('select option').map(function(i, el) { return el.text; })
                             .toArray();
alert(vals[2]); // "two"

或者如果option值不是基于顺序0的索引，则使用对象...

var vals = {};

$('select option').each(function(i, el) { vals[el.value] = el.text });

alert(vals[2]); // "two"

Answer 2

var value = '3';
alert($('select option[value=' + value + ']').text());

Live demo

此外，您可能希望为select选择一个id并更新选择器，因为如果您有多个下拉列表，则选择器将不起作用：

alert($('#id_of_the_select option[value=' + value + ']').text());

Answer 3

如果不迭代每个选项，您还会如何扫描值？没有任何魔法属性可以帮助你。

但是，您可以使用以下代码：

(function() {
    var sels = document.getElementsByTagName('select'), l = sels.length, i,
        opts, m, j, o;
    for( i=0; i<l; i++) {
        o = {};
        opts = sels[i].options;
        m = opts.length;
        for( j=0; j<m; j++) o[opts[j].value] = opts[j].text;
        sels[i].map = o;
    }
})();

将它放在</body>之前，现在您可以在页面上找到任何<select>的地图：

var sel = document.getElementById('mySelect');
alert(sel['0']);

Answer 4

使用attribute-equals选择器：

var valToSearchFor = 0;
    textFromOption = $('select option[value="' + valToSearchFor + '"]').text();

这仍将遍历每个option以测试您正在寻找的值的存在，但它将在幕后执行此操作，以便您不必这样做。

有可能使用querySelectorAll()（虽然与上面的jQuery或多或少相同）：

var valToSearchFor = 0;
    textFromOption = document.querySelectorAll('option[value="' + valToSearchFor + '"]').innerHTML;

当然，这需要浏览器实现querySelectorAll()，而不是全部（IE特别是）。

参考文献：

Answer 5

使用selected:选择器。在页面上给出的示例。

http://api.jquery.com/selected-selector/

 $("select").change(function () {
      var str = "";
      $("select option:selected").each(function () {
            str += $(this).text() + " ";
          });
      $("div").text(str);
    })
    .trigger('change');

将“div”替换为您尝试触发的事件

http://jsfiddle.net/ckaufman/aDU5E/1/

根据值获取选择选项文本

5 个答案: