Как связать <select>из списка значений, разделенных запятыми в JQuery? - PullRequest
Новая
       20

Как связать <select>из списка значений, разделенных запятыми в JQuery?

11 голосов
/ 19 августа 2011

Как мы можем связать тег выбора с переменными данными? ..

Вот мой пример кода здесь. 

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

Ответы [ 6 ]

11 голосов
/ 19 августа 2011 
$(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 голосов
/ 19 августа 2011

Ответ здесь: Каков наилучший способ добавления опций для выбора из массива с помощью jQuery?

Перебирайте языки в цикле for и используйте кодв ответе выше.

1 голос
/ 19 августа 2011 
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/

0 голосов
/ 19 августа 2011

Конечно, вы можете сделать это вручную, но для удовольствия, это нечто вроде Шаблоны jQuery предназначены для этого.Тег {{each}} позволит вам перебирать массив или объект, создавая динамический HTML по ходу работы.

Сначала настройте шаблон: 

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

Вот пустой HTML <select>, который будет заполнен новыми <option> тегами: 

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

0 голосов
/ 19 августа 2011

Вы можете сделать что-то вроде этого: 

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/

0 голосов
/ 19 августа 2011

Самый быстрый (для ввода) способ сделать это - сначала создать строку HTML, а затем вставить ее в <select>: 

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