获取基于值的选择选项文本

Getting select option text based on value

本文关键字：选项 文本 选择 于值 获取      更新时间：2023-09-26

我有一个菜单。 给定给定的值，我想返回文本。 例如，0 将返回"零"，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>

谢谢

与其将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"

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

现场演示。

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

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

否则如何在不迭代每个选项的情况下扫描值？没有任何神奇的属性可以为您做到这一点。

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

(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']);

使用属性等于选择器：

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

这仍将遍历每个option以测试您正在寻找的值是否存在，但它将在"幕后"进行，这样您就不必这样做。

有可能使用querySelectorAll()（尽管与上面的jQuery或多或少具有相同的表示法）：

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

当然，这需要浏览器实现 querySelectorAll() ，而不是所有人都这样做（特别是 IE）。

引用：

  • 属性等于[attribute="value"]选择器。
  • document.querySelectorAll() .

使用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/

相关文章：