Выберите значение выпадающего меню с помощью 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

Я сделаю что-то подобное, чтобы добиться того, чего вы хотите ...

Смотрите комментарии во фрагменте:

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 2

Попробуйте это будет работать

код:

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

Answer 3

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