Question

我想为Bootstrap Dropdown框编写javascript代码，但我不知道如何引用下拉列表中的项目。当我写if语句之类的东西时，我可以引用没有ID或类，例如if（item1被选中或是真的）{“发生了什么事情”}}。如何引用item1或item2或item3？

 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
    <li role="presentation" class="item1"><a role="menuitem" tabindex="-1" href="javascript:void(0)">item1</a></li>
    <li role="presentation" class="item2"><a role="menuitem" tabindex="-1" href="javascript:void(0)">item2</a></li>
    <li role="presentation" class="item3"><a role="menuitem" tabindex="-1" href="javascript:void(0)">item3</a></li>

  </ul>

    $('.dropdown-menu li').on('click', function(){
       if($('.dropdown-menu li.item1')){
            $('item1Box').fadeTo(200, 0);
           }
    });

Answer 1

您可以根据自己的要求进行一些自定义。因此，例如，您可以在下拉列表的更改事件期间在所选值上添加自定义类，并将其设置为选中。

$('.dropdown-menu li').on('click', function(){
    //Remove previously selected 
    $('.dropdown-menu li').removeClass("selectedValue");
    //Add selected flag to current element
    $(this).addClass("selectedValue");
});

您可以使用

检查所选值

$('.dropdown-menu li.selectedValue');

或者，此外，您可以根据需要将自己的类和ID添加到Bootstrap下拉列表中。

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
    <li role="presentation" class="first-value"><a role="menuitem" tabindex="-1" href="#">item1</a></li>
    <li role="presentation" class="second-value"><a role="menuitem" tabindex="-1" href="#">item2</a></li>
    <li role="presentation" class="third-value"><a role="menuitem" tabindex="-1" href="#">item3</a></li>
  </ul>

Answer 2

我认为你可以做开关和案例（li.value = item1）...... 也许你应该把值=＆＃34; item1＆＃34;在li元素 - 或者宁可摆脱这些链接，并通过Javascript / jquery做到这一点我有类似switch(li.value){ (item1) : $("#dropdown-menu").attr("action", page1.html); $("#dropdown-menu").submit(); break; (item2) : ..... }的东西，我认为这些是＆＃34;索引＆＃34;或服务器知道ttt item1是第一个

...并且打开form = dropdown的triger提交

Answer 3

有点像这样吗？ http://jsfiddle.net/he2d1mmt/

  <div class="dropdown">
        <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown trigger
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu pres" role="menu" aria-labelledby="dLabel">
          <li role="presentation" class="item1"><a role="menuitem" tabindex="-1" href="#)">item1</a></li>
          <li role="presentation" class="item2"><a role="menuitem" tabindex="-1" href="#">item2</a></li>
          <li role="presentation" class="item3"><a role="menuitem" tabindex="-1" href="#">item3</a></li>
        </ul>
      </div>
<script>
$(document).ready(function() {
  $(".pres").children().click(function(){
    $(this).fadeTo(200, 0);
  });
});
</script>

选择具有Bootstrap下拉列表的项目

3 个答案: