javascript - 如何获取 Bootstrap 下拉菜单的当前值

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即箭头就会被替换，因为您正在替换text的text .btn1。现在它将替换为 caret 并将内容替换为 html。希望对您有所帮助。