Question

我想做的是：

首先选择下拉列表drp0，然后选择drp1。
当您选择drp1时，如果drp0没有选择值，alert("Please select Leave Type Dropdown first")。
然后将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>

第二个下拉列表很好。没问题。 enter image description here

实际上我找到了一种方法来检查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之后，选择.btn1 caret即用于替换的箭头。现在，它将替换为html，内容将替换为COMMAND echo "$$" > file.txt。希望它有所帮助。

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");
                  }
                });
            });

Heeeyyyy尝试这个......

Answer 3

很多善良的人试图帮助我。谢谢你。正如他们所说，最好的事情是使用bootstrap select，但我想使用 ul li bootstrap下拉列表。所以如果有人对此感兴趣的话。我找到了这个。

 $('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>

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

3 个答案: