HTML选择列表-通过传递变量获取文本值

html select list - get text value by passing in a variable?

本文关键字：变量 获取 取文本 选择 列表 -通 HTML      更新时间：2023-09-26

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

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

我能够使用以下代码获得所选值的文本值[从上面的选择列表返回英语(US)]:

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

我怎么能得到文本值，如果我传递'bg'的选项值作为一个变量，当选择的值仍然是英语(美国)?

这意味着当选择的值仍然是"English (US)"时，返回的值将是"Bulgarian - Български"。

我已经搜索了谷歌和SO的答案，但无法找到一个，所以我认为这并不像我第一次想到的那么容易!

下面是一个如何使用CSS选择器查询value属性的示例:

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

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

您有一些数据，并且您有这些数据的视图(html/dom)，但最好是选择data -> view，而不是view -> data。

例如，假设你有这样一个数组:

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

现在您可以查找内容，例如，"缩写'bg'的文本是什么?"

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

嗯，如果我理解正确的话，您想要检索与<select>元素的一个选项的给定值相关联的标签，这不一定是当前选择的选项。使用纯JavaScript方法(又名。没有jQuery，因为别人已经提供了一个很好的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。希望这对你有帮助!如果您有任何问题，请告诉我。
相关文章：