使用jQuery根据URL更改下拉列表中的选定值

Question

Here is what i am trying to do:

<select id="dynamic_select">
<option value="http://blog.mysite.com/">United Kingdom</option>
<option value="http://fr.blog.mysite.com/">France</option>
<option value="http://de.blog.mysite.com/">Deutschland</option>
<option value="http://it.blog.mysite.com/">Italia</option>
<option value="http://jp.blog.mysite.com/">日本</option>
<option value="http://es.blog.mysite.com/">España</option>
</select>

First Script

jQuery(function(){
  // bind change event to select
  jQuery('#dynamic_select').bind('change', function () {
      var url = jQuery(this).val(); // get selected value
      if (url) { // require a URL
          window.location = url; // redirect
      }
      return false;
  });
});

Another Script

jQuery(document).ready(function() {
 if(window.location.href.indexOf("fr") != -1) {
jQuery("#dynamic_select option[value='2']").attr('selected', 'selected');
}
});

This is a language selector which will be displayed on iphone (using WPtouchPro), the first part ie change of url based on selection is working perfect.. but i want to change the option selected in the drop down list with the value equal to the url of the page.. Also how to write those Japanese letter so that they display properly on all browsers.. Thanks :)

Answer 1

use UTF-8 charset for Japanese characters:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>  

by using data attribute you can try this:

<select id="dynamic_select">
<option data-c="uk" value="http://blog.mysite.com/">United Kingdom</option>
<option data-c="fr" value="http://fr.blog.mysite.com/">France</option>
<option data-c="de" value="http://de.blog.mysite.com/">Deutschland</option>
<option data-c="it" value="http://it.blog.mysite.com/">Italia</option>
<option data-c="jp" value="http://jp.blog.mysite.com/">日本</option>
<option data-c="es" value="http://es.blog.mysite.com/">España</option>
</select>

supposing window.location.href.slice(7, 9) equals to de :

$(document).ready(function() {
      lt = "de";
    $("#dynamic_select option").each(function(){
       if ($(this).data("c") == lt ) $(this).prop("selected", true);
    })
});

http://jsfiddle.net/qj8x8/1/