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

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>