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

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(){}) 里面，下面是编辑过的代码

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

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