How to bind <select> from list of comma separated values in JQuery?

Question

How we can bind select tag with variable data?..

Here is my sample code here.

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

I want Bind my select tag using above languages

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

How to bind "langsel" select with above variable.?

I need output like below :

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

daryl · Accepted Answer · 2011-08-19 06:37:01Z

10

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

});

Working Fiddle: http://jsfiddle.net/qtb6S/

edited Aug 19, 2011 at 6:37

answered Aug 19, 2011 at 6:29

daryl

15.3k21 gold badges70 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:32:58Z

2

The answer is here: What is the best way to add options to a select from an array with jQuery?

Loop through your languages in a for loop, and use the code in that answer above.

edited May 23, 2017 at 12:32

CommunityBot

11 silver badge

answered Aug 19, 2011 at 6:22

user481081

Comments

Rafay · Accepted Answer · 2011-08-19 07:09:31Z

1

var languages = [
  'AFRIKAANS : af',
  'ALBANIAN : sq',
  'AMHARIC : am',

]

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

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

    );
});

fiddle http://jsfiddle.net/3dFgg/

edited Aug 19, 2011 at 7:09

answered Aug 19, 2011 at 6:37

Rafay

31.1k5 gold badges71 silver badges106 bronze badges

Comments

sdleihssirhc · Accepted Answer · 2011-08-19 06:24:41Z

0

The quickest (to type) way to do it would be to first build the HTML string, and then insert it into the <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;

answered Aug 19, 2011 at 6:24

sdleihssirhc

42.6k6 gold badges56 silver badges67 bronze badges

Comments

Sang Suantak · Accepted Answer · 2011-08-19 06:44:29Z

0

You could do something like this:

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/

edited Aug 19, 2011 at 6:44

answered Aug 19, 2011 at 6:39

Sang Suantak

5,2652 gold badges30 silver badges46 bronze badges

Comments

Ken Redler · Accepted Answer · 2011-08-19 06:53:56Z

You can certainly do this manually, but for fun, this is the sort of thing jQuery Templates are designed to do. The {{each}} tag will let you iterate over an array or object, building some dynamic HTML as you go.

First set up the template:

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

Here's the empty HTML <select> to be filled with new <option> tags:

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

Your language object:

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

Then the easy part:

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

Here's a working example: http://jsfiddle.net/redler/nHtH3/

Collectives™ on Stack Overflow

How to bind <select> from list of comma separated values in JQuery?

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related