使用jquery基于url更改下拉列表中的选定值

时间:2012-04-26 22:19:26

标签: jquery iphone

以下是我要做的事情:

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

第一个脚本

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;
  });
});

另一个脚本

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

这是一个将在iphone上显示的语言选择器(使用WPtouchPro),第一部分即基于选择的url更改工作正常..但我想更改下拉列表中选择的选项值等于页面的网址.. 另外如何写这些日文字母,以便它们在所有浏览器上正确显示.. 谢谢:))

1 个答案:

答案 0 :(得分:1)

对日语字符使用UTF-8字符集:

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

使用data属性,您可以尝试:

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

假设window.location.href.slice(7, 9)等于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/