如何获取引导下拉列表的当前值

Question

我想做的是：

1. 先选择下拉列表drp0，然后选择drp1。
2. 选择drp1时，如果drp0没有选择值，alert("Please select Leave Type Dropdown first")。
3. 然后将drp1 设置为默认值并将焦点设置在drp0。

这是我的两个下拉菜单：

<div class="col-sm-6">
    <label>Select Leave Type</label>
    <div class="dropdown">
        <i class="dropdown-arrow dropdown-arrow-inverse"></i>
        <button class="btn btn0 btn-default dropdown-toggle" type="button" id="menu0" data-toggle="dropdown">
            --Select--
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu  dropdown-inverse0" role="menu" aria-labelledby="menu0" id="drp0">
            <li role="presentation"><a data-myAttribute0="casual" class="list0" href="#">Casual Leave</a></li>
            <li role="presentation"><a data-myAttribute0="annual" class="list0" href="#">Annual Leave</a></li>
            <li role="presentation"><a data-myAttribute0="medical" class="list0" href="#">Medical Leave</a></li>
        </ul>
    </div>
</div>

<div class="col-sm-6">
    <label>Select Employee Name</label>
    <div class="dropdown">
        <i class="dropdown-arrow dropdown-arrow-inverse"></i>
        <button class="btn btn1 btn-default dropdown-toggle hide-button" type="button" id="menu1" data-toggle="dropdown">
            --Select--
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu  dropdown-inverse1" role="menu" aria-labelledby="menu1" id="drp1">
            <c:forEach items="${personList}" var="person">
                <li role="presentation"><a data-myAttribute1="${person.getId()}" class="list1" href="#">${person.getName()}</a></li>
            </c:forEach>
        </ul>
    </div>
</div>  

第二个下拉列表填充得很好。没有问题。

实际上我找到了一种方法来检查是否选择了 dropdown1，而选择 dropdown2？但问题是当 dropdown1 选择了值时，我得到了这个未定义的错误警报？
看起来它没有采用 dropdown1 的当前值。
这是我的代码。

<script>
    $(document).ready(function () {
        $('.dropdown-inverse1 li > a').click(function () {
            var $person_id = $(this).attr("data-myAttribute1");
            var $leave_type = $(this).attr("data-myAttribute0");
            if (typeof $leave_type === 'undefined') {
                alert("Empty");
            } else {
                alert("Not Empty");
            }
        });
    });
</script>

我的问题是无论 dropdown1 是否有值，我都会收到“空”警报。如何解决这个问题？谢谢。

Answer 1

这里是 DEMO 和最简化和更好的解决方案版本：

$('.dropdown-inverse1 li > a').click(function () {
      $(".btn1").html($(this).text() + ' <span class="caret"></span>');
});
$('.dropdown-inverse2 li > a').click(function (e) {
     var s = $(".btn1").text().trim();
     if(s=="Button1"){
        alert("Empty");
        $(".btn2").html('Button2  <span class="caret"></span>');
        setTimeout(function(){
             $(".btn1").trigger('click');
        },100); //set a timeout of 100ms to trigger the click so as to open the required dropdown
          return;
     } 
     $(".btn2").html($(this).text() + ' <span class="caret"></span>');
});

您在解决方案中遇到了一些问题，例如，一旦您选择了 dropdown 和 caret，即用于替换的箭头，因为您要替换 .btn1 的 text。现在它将替换为caret，内容为html。希望对您有所帮助。

Answer 2

  $(document).ready(function () {
      var $leave_type = "";
              $('.dropdown-inverse0 li > a').click(function () {
                     $leave_type = $(this).attr("data-myAttribute0");
                    if (typeof $leave_type === 'undefined') {
                        alert("Empty");
                    } else {
                        alert("Not Empty");
                    }
                });
              $('.dropdown-inverse1 li > a').click(function () {
                    var $person_id = $(this).attr("data-myAttribute1");
                  if (typeof $leave_type === 'undefined') {
                    if (typeof $person_id === 'undefined') {
                        alert($leave_type);
                    } else {
                       alert("Not Empty");
                    }
                  }else{
                      $('#menu0').trigger('click');
                      alert("Please select Leave Type");
                  }
                });
            });

嘿嘿嘿试试这个……

Answer 3

您好很多好心人试图帮助我。谢谢你。正如他们所说，最好的方法是使用引导选择，但我想使用 ul li 引导下拉菜单。因此，如果有人对此感兴趣。我找到了这个。

 $('document').ready(function () {

                $('.dropdown-inverse1 li > a').click(function () {
                    $(".btn1").text($(this).text());
                });
                $('.dropdown-inverse2 li > a').click(function () {
                    $(".btn2").text($(this).text());
                    var s = $(".btn1").text();
                    if(!(s=='HTML' ||  s=='CSS' ||  s=='JavaScript') ){
                     alert("Empty");
                    } 
                });
            });

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>

<div class="container">
  <div class="dropdown">
    <button class="btn btn1 btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Button1
    <span class="caret"></span></button>
    <ul class="dropdown-menu dropdown-inverse1">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
    </ul>
  </div>
<br/>
<div class="dropdown">
    <button class="btn btn2 btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Button2
    <span class="caret"></span></button>
    <ul class="dropdown-menu dropdown-inverse2">
      <li><a href="#">A</a></li>
      <li><a href="#">B</a></li>
      <li><a href="#">C</a></li>
    </ul>
  </div>
</div>

</body>