如何从 JQuery 中的逗号分隔值列表中绑定 <select>?

Posted

技术标签:

【中文标题】如何从 JQuery 中的逗号分隔值列表中绑定 <select>?【英文标题】:How to bind <select> from list of comma separated values in JQuery? 【发布时间】:2011-10-30 08:49:51 【问题描述】:

我们如何将选择标签与可变数据绑定?..

这是我的示例代码。

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script>
var google.language.Languages = 
  'AFRIKAANS' : 'af',
  'ALBANIAN' : 'sq',
  'AMHARIC' : 'am',
  'ARABIC' : 'ar',
  'ARMENIAN' : 'hy',
  'AZERBAIJANI' : 'az' ...

</script>

我想使用上述语言绑定我的选择标签

<select id="langsel" name="selector">
        <option value="">Select a language</option>
</select>

如何将“langsel”选择与上述变量绑定?

我需要如下输出

 <select id="langsel" name="selector">
            <option value="">Select a language</option>
            <option value="af">AFRIKAANS</option> 
            ....
    </select>

【问题讨论】:

【参考方案1】:
$(function() 

    var languages = 
      'AFRIKAANS' : 'af',
      'ALBANIAN' : 'sq',
      'AMHARIC' : 'am',
      'ARABIC' : 'ar',
      'ARMENIAN' : 'hy',
      'AZERBAIJANI' : 'az'
    

    var sel = $('#langsel');

    $.each(languages, function(key, value)  
        sel.append('<option value="'+value+'">'+key+'</option>');
    );

);

工作小提琴:http://jsfiddle.net/qtb6S/

【讨论】:

【参考方案2】:

答案在这里:What is the best way to add options to a select from an array with jQuery?

在 for 循环中遍历您的语言,并使用上述答案中的代码。

【讨论】:

【参考方案3】:
var languages = [
  'AFRIKAANS : af',
  'ALBANIAN : sq',
  'AMHARIC : am',

]

$.each(languages,function(index,elem)
    $("#langsel").append(

    $("<option/>").val(elem.split(':')[1]).text(elem.split(':')[0])

    );
);

小提琴http://jsfiddle.net/3dFgg/

【讨论】:

【参考方案4】:

最快的(键入)方法是首先构建 html 字符串,然后将其插入到&lt;select&gt;

var languages =  /* ... */ ,
    str = '',
    hop = Object.prototype.hasOwnProperty,
    x;

for (x in languages) 
    if (hop.call(languages, x)) 
        str += '<option value="' + languages[x] + '">' + x + '</option>';
    

document.getElementById('langsel').innerHTML += str;

【讨论】:

【参考方案5】:

你可以这样做:

var sel = $("#langsel");
var html = "";
var items = Languages;
html =  $("<option></option>").text("Select a Language").val(""); 
sel.append(html);
html = "";
for (var index in items) 
    html = $("<option></option>").text(index).val(items[index]);
    sel.append(html);
    html = "";
    

jsFiddle http://jsfiddle.net/FXta5/

【讨论】:

【参考方案6】:

您当然可以手动执行此操作,但为了好玩,这是 jQuery Templates 旨在做的事情。 each 标签可以让你遍历一个数组或对象,构建一些动态的 HTML。

首先设置模板:

<script id="optionTemplate" type="text/x-jquery-tmpl">
    each(lang,abbrev) $data
    <option value="$abbrev">$lang</option>
    /each
</script>

这里是空的 HTML &lt;select&gt; 用新的 &lt;option&gt; 标签填充:

<select id="langsel" name="selector">
    <option value="">Select a language</option>
</select>

您的语言对象:

var langs = 
    'AFRIKAANS': 'af',
    'ALBANIAN': 'sq',
    'AMHARIC': 'am',
    'ARABIC': 'ar',
    'ARMENIAN': 'hy',
    'AZERBAIJANI': 'az'
;

然后是简单的部分:

$("#optionTemplate").tmpl(langs).appendTo("#langsel");

这是一个工作示例:http://jsfiddle.net/redler/nHtH3/

【讨论】:

以上是关于如何从 JQuery 中的逗号分隔值列表中绑定 <select>?的主要内容,如果未能解决你的问题,请参考以下文章

jquery:获取逗号分隔列表中的前 X 个项目

SQL Server 2005 中的逗号分隔值插入

如何从包含逗号分隔条目的变量中创建(不同的)值列表?

如何从 SQL CE 中的表中构建逗号分隔列表?

jQuery中的逗号分隔列表

TSQL 将列中的逗号分隔值与逗号分隔参数进行比较