Question

What I have is an that opens up a Jquery popup with a form in it. This form has a with multiple options (you can select more than one at a time). I am trying to use a “countries” attribute of the to select multiple selections (see example below).

This WORKS:

<a href="#" id="openpop"> //The link

....
//The Popup HTML
<select id="countryselection" multiple="multiple">
<option>US</option>
<option>CA</option>
<option>GB</option>
</select>

....
//The event handler
$("#openpop").click(function(){
loadPopup();
("#countryselection").val(['US', 'CA']);
});

So the example above works fine…

This ALSO WORKS:

<a href="#" id="openpop" countries="US"> //The link with countries attribute

....
//The Popup HTML
<select id="countryselection" multiple="multiple">
<option>US</option>
<option>CA</option>
<option>GB</option>
</select>

....
//The event handler
$("#openpop").click(function(){
loadPopup();
("#countryselection").val([$(this).attr("countries"), 'CA']); //Notice the this.attr
});

The problem is, I need to set MULTIPLE countries, all from the countries attribute of the tag.

It doesn’t work when I try it…

This DOES NOT WORK:

<a href="#" id="openpop" countries="'US','CA'"> //The link with multiple countries

....
//The Popup HTML
<select id="countryselection" multiple="multiple">
<option>US</option>
<option>CA</option>
<option>GB</option>
</select>

....
//The event handler
$("#openpop").click(function(){
loadPopup();
("#countryselection").val([$(this).attr("countries")]); //Notice the this.attr
});

I hope you can see what I am trying to do here. Somehow I need the Jquery to take in the “countries” attribute as an array, although I am not sure how to do this.

Thanks for the help!

Answer 1

http://jsfiddle.net/V62Yq/

<a href="#" id="openpop" countries="US,CA">link</a>

<select id="countryselection" multiple="multiple">
    <option>US</option>
    <option>CA</option>
    <option>GB</option>
</select>
​

//The event handler
$("#openpop").click(function(e){
    e.preventDefault();
    var vals = $(this).attr('countries').split(",");
    $("#countryselection").val(vals); 
});​

And though adding a country attribute is kind of valid depending on the html spec you are targeting, you should likely use data attributes for information such as “countries” in your link tag. You can access them the same way.

$(selector).attr('data-countries');

<a href="#" id="openpop" data-countries="US,CA">link</a>

See: http://ejohn.org/blog/html-5-data-attributes/