Pick multiple values in a change function of Dropdown

Question

I have a problem about the accessing multiple values in the change function of a dropdown.

I have a JSON Format like ;

{
lang: [
{
Code: "ar",
name: "العربية",
direction: "rtl"
},
{
Code: "da",
name: "Danske",
direction: "ltr"
},
{
Code: "du",
name: "Nederlands",
direction: "ltr"
},
{
Code: "en",
name: "English",
direction: ""
},
{
Code: "es",
name: "Español",
direction: "ltr"
},
{
Code: "fi",
name: "Suomeksi",
direction: "ltr"
},
{
Code: "fr",
name: "Français",
direction: "ltr"
},
{

Code: "ge",
name: "Deutsch",
direction: "ltr"
},
{
Code: "it",
name: "Italiano",
direction: "ltr"
},
{
Code: "no",
name: "Norge",
direction: "ltr"
},
{
Code: "pl",
name: "Polski",
direction: "ltr"
},
{
Code: "pt",
name: "Portuguese ",
direction: ""
},
{
Code: "ru",
name: "Русский",
direction: "ltr"
},
{
Code: "se",
name: "Svenska",
direction: "ltr"
}
]

The code for access this JSON in my dropdown / selectbox ;

function loadlanguages(){

$.ajax({ 
 url:'https://xxxx/json/lang_list.php?json=1&rcg_mobile=2',
 data:'',
 contentType: "application/json; charset=utf-8",
 type: "POST",
 dataType: "json",
 crossDomain:true,
 cache: false,
 async:false,
 success: function(data, textStatus, jqXHR){
     var count = data.lang.length;
     var set_languages=$('#languageselector'); 
     var set_languages_ = '';
     set_languages.empty();
     for(var i =0;i < count;i++)
     {
      set_languages_ += '<option value='+data.lang[i].Code+'>'+data.lang[i].name+'</option>';    
     }
     set_languages.append(set_languages_); 
    },

     error: function(XMLHttpRequest, textStatus, errorThrown){hideLoading();alert_unable_to_access();}
  });

}

Now everything is successfully loaded. But When I choose anyone of the languages ; i want to get its corresponding "direction".

How i can manage this??? How I could get the direction when i select anyone of the languages?? I think its a simple thing.. but i didnt get a solution for this.. Please Help..!!! :(

Answer 1

Set the data-* attributes on the options inside the success method like:

'<option data-direction="' + data.lang[i].direction + '" value='+data.lang[i].Code+'>'+data.lang[i].name+'</option>'

and in the js code you can get it like

$('#languageselector option:selected').data('direction');

Answer 2

Change the the set_languages string to

set_languages_ += '<option data-direction='+data.lang[i].direction+' value='+data.lang[i].Code+'>'+data.lang[i].name+'</option>'; 

and your change listener will look something like this :

$('#languageselector').on("change",function(e){
// direction contains the appropriate direction
var direction = $(this).attr("data-direction");
})

Answer 3

modify the line to :

set_languages_ += '<option _direction='+data.lang[i].direction+' value='+data.lang[i].Code+'>'+data.lang[i].name+'</option>';

in for loop.

And in js

$('#languageselector').change(function(){
    console.log($('#languageselector').attr('_direction'));
    });

This will fetch the changed/selected value of the dropdown menu