点击下拉菜单后保持选中状态

Question

我使用带有bootstrap的javascript为我的dropmenu。当我点击价值＆＃34;迈克尔＆＃34;时，它会回到＆＃34;所有名字＆＃34;提交后。我试图配置我的dropmenu以保持＆＃34;迈克尔＆＃34;当我点击它时选择，但它总是回到＆＃34;所有名称＆＃34;选项？有人可以帮忙吗？

<a>Names</a>
<a class="btn btn-warning btn-select btn-select-light">
  <span class="btn-select-value">All names</span>
  <span class='btn-select-arrow glyphicon glyphicon-chevron-down'></span>
  <input class="span2" id="select_names" name="names" type="hidden">
  <ul name="names">
    <li onclick="$('#select_names').val('Michael');" <?if ($_POST['names']=="Michael" ) echo 'selected="selected"'?>>Michael</li>
    <li onclick="$('#select_names').val('Sofia');">Sofia</li>
    <li onclick="$('#select_names').val('Sani');">Sani</li>
  </ul>
</a>
<div class="col-md-12">
  <section>
    <button id="js-trigger-overlay" type="submit" class="btn btn-success">Search</button>
  </section>

这是下拉菜单的javascript。

$(document).ready(function() {
  $(".btn-select").each(function(e) {
    var value = $(this).find("ul li.selected").html();
    if (value != undefined) {
      $(this).find(".btn-select-input").val(value);
      $(this).find(".btn-select-value").html(value);
    }
  });
});

$(document).on('click', '.btn-select', function(e) {
  e.preventDefault();
  var ul = $(this).find("ul");
  if ($(this).hasClass("active")) {
    if (ul.find("li").is(e.target)) {
      var target = $(e.target);
      target.addClass("selected").siblings().removeClass("selected");
      var value = target.html();
      $(this).find(".btn-select-input").val(value);
      $(this).find(".btn-select-value").html(value);
    }
    ul.hide();
    $(this).removeClass("active");
  } else {
    $('.btn-select').not(this).each(function() {
      $(this).removeClass("active").find("ul").hide();
    });
    ul.slideDown(300);
    $(this).addClass("active");
  }
});

$(document).on('click', function(e) {
  var target = $(e.target).closest(".btn-select");
  if (!target.length) {
    $(".btn-select").removeClass("active").find("ul").hide();
  }
});