Question

我有一个显示列表语言的选择列表。

<select name="language_code" id="id_language_code">
    <option value="ar">Arabic - العربية</option>
    <option value="bg">Bulgarian - Български</option>
    <option value="zh-CN">Chinese (Simplified) - 中文 (简体)‎</option>
    <option value="en" selected="selected">English (US)</option>
    <option value="fr-CA">French (Canada) - français (Canada)‎</option>
</select>

我可以使用以下代码[从上面的选择列表中返回英语（美国）]获取所选值的文本值：

$('#id_language_code option:selected').text()

如果在选定的值仍为英语（美国）时将“bg”的选项值作为变量传递，我如何获取文本值？

这意味着当所选值仍为“英语（美国）”时，返回的值将为“保加利亚语 - Български”。

我搜索了Google和SO以获得答案，但却找不到答案，所以我认为这并不像我之前想象的那么容易！

Answer 1

以下是如何使用CSS选择器查询value属性的示例：

function getOptionTextByValue(value) {
  return $('#id_language_code option[value=' + value +  ']').text();
}

var bgText = getOptionTextByValue('bg');

这是一个工作示例 http://plnkr.co/edit/SQ48SmoQkSUgDpQ5BNAx?p=preview

Answer 2

你有一些数据，你可以看到这些数据（html / dom），但如果你去数据它是最好的 - ＆gt;查看，而不是查看 - ＆gt;数据

例如，假设你有这个数组：

var languages = [
    {short: "ar", text: "Arabic - العربية"},
    {short: "bg", text: "Bulgarian - Български"},
    {short: "en", value: "English (US)"}
];

现在你可以查看一下了，例如，＆＃34;缩写＆＃39; bg＆＃39;是什么？＆＃34;

languages.filter(function(x){ return x.short === 'bg' })[0].text;

或者从中创建DOM节点：

function option(x){
    var el = document.createElement('option');
    el.value = x.short; el.textContent = el.text;
    return el;
}

function select(options){
    var el = document.createElement('select');
    options.forEach(function(x){ el.appendChild(x); });
    return el;
}

var element = select(languages.map(option));
element.id = 'id_language_code';

Answer 3

嗯，如果我理解正确，你想要检索与<select>元素的一个选项的给定值相关联的标签，这个选项不一定是当前选择的选项。使用纯JavaScript方法（又名。没有jQuery，因为其他人已经提供了一个很好的方法）：

function getOptionLabel(selectId, optionValue){
    // Get select element and all options
    var sel = document.getElementById(selectId);
    var selOpts = sel.options;

    // Cycle through each option to compare its value to the desired one
    for(var i = 0; i < selOpts.length; i++){
        if (selOpts[i].value == optionValue){
            return selOpts[i].label;
        }
    }

    // Default return value
    return "Option not found.";
}

要从给定ID的<select>获取保加利亚选项，您可以这样称呼它：

getSelectLabel("id_language_code", "bg");

这里有JSFiddle来演示。希望这可以帮助！如果您有任何问题，请告诉我。

html选择列表 - 通过传入变量获取文本值？

3 个答案: