Question

我确实构建了这个菜单：

$('.dropdown-menu a').click(function() {
  $('#select').text($(this).text());
  var lang = ($(this).text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- language picker with flags -->
<div class="row">
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdown-menu1" style="width: 200px; position: relative; left: 19px;" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span id="select">Select source language </span><span class="caret"></span>
            </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1" style="width: 200px; position: absolute; left: 19px">
      <li class="dropdown-header">Languages</li>
      <li><a role="menuitem" id="ger" href="#">German <img src="flags/Germany.png"/></a></li>
      <li role="separator" class="divider"> </li>
      <li> <a role="menuitem" id="sp" href="#">Spanish <img src="flags/Spain.png"/></a></li>
      <li role="separator" class="divider"></li>
      <li><a role="menuitem" id="fr" href="#">French <img src="flags/France.png"/></a></li>
    </ul>

  </div>
</div>

<script>  
   var browser_lang = (navigator.language);    
   alert(browser_lang);
   $('#select').text($('#ger').text());
</script>

之后，我的目标是检索浏览器语言并根据下拉菜单中的结果选择适当的语言，但它不适用于我拥有并希望保留的菜单。这里有诀窍吗？

Answer 1

@Shazy，把你的代码放在$（document）.ready（function（）{}）里面，下面是编辑后的代码

＆＃13;

$(document).ready(function(){
               $('.dropdown-menu a').click(function (){
                    $('#select').text($(this).text());
                     var lang = ($(this).text());  
                     alert(lang);
                     }); 
                  })

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
        <div class="dropdown">
            <button class="btn btn-default dropdown-toggle" type="button" id="dropdown-menu1" style="width: 200px; position: relative; left: 19px;"  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span id="select">Select source language </span><span class="caret"></span>
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1" style="width: 200px; position: absolute; left: 19px">
            <li class="dropdown-header">Languages</li>
            <li><a role="menuitem" id="ger" href="#">German <img src="flags/Germany.png"/></a></li> 
            <li role="separator" class="divider"> </li> 
            <li> <a role="menuitem" id="sp" href="#">Spanish <img src="flags/Spain.png"/></a></li>
            <li role="separator" class="divider"></li>
            <li><a role="menuitem" id="fr" href="#">French <img src="flags/France.png"/></a></li>
            </ul>
        </div>                                 
    </div>

＆＃13;

Answer 2

我会做那样的事情来实现你想要的......

请参阅代码段中的评论：

var browser_lang = (navigator.language);
console.log(browser_lang); // I prefer consoling, less agressive!
// For me, the output is "fr-FR". It has to be split to fit the ids of your menu items

browser_lang = browser_lang.split("-")[0];       // Now it's "fr" for me
$('#select').text($('#' + browser_lang).text()); // Modified

.dropdown-menu, #dropdown-menu1 {
  width: 200px;
  position: relative;
  left: 19px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- language picker with flags -->
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdown-menu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span id="select">Select source language </span><span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li class="dropdown-header">Languages</li>
    <li><a role="menuitem" id="ger" href="#">German <img src="flags/Germany.png"/></a></li>
    <li role="separator" class="divider"> </li>
    <li><a role="menuitem" id="sp" href="#">Spanish <img src="flags/Spain.png"/></a></li>
    <li role="separator" class="divider"></li>
    <li><a role="menuitem" id="fr" href="#">French <img src="flags/France.png"/></a></li>
  </ul>

</div>

希望它有所帮助。

Answer 3

试试这个会起作用

代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- language picker with flags -->
<style>
.dropdown-menu, #dropdown-menu1 {
  width: 200px;
  position: relative;
  left: 19px;
}
</style>
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdown-menu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span id="select">Select source language </span><span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1" id=myid>
    <li class="dropdown-header">Languages</li>
    <li><a role="menuitem" id="ger" href="#">German </a></li>

    <li><a role="menuitem" id="sp" href="#">Spanish </a></li>

    <li><a role="menuitem" id="fr" href="#">French </a></li>
  </ul>

</div>

<script>

$("#myid li").click(function() {
    alert($(this).text());
});
</script>

在jquery的帮助下选择下拉菜单的值

3 个答案: