Question

stackoverflow中有很多关于如何获取引导下拉列表的选定值的答案

<div class="input-group">                                            
    <input type="TextBox" ID="datebox" Class="form-control"></input>
    <div class="input-group-btn">
        <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
            <span class="caret"></span>
        </button>
        <ul id="demolist" class="dropdown-menu">
            <li><a href="#">A</a></li>
            <li><a href="#">B</a></li>
            <li><a href="#">C</a></li>
        </ul>
    </div>
</div>

使用

我没问题

$('.dropdown-menu a').on('click', function(){    
    $(this).parent().parent().prev().html($(this).html() + '<span class="caret"></span>');    
    })

但之后我需要发出一个包含多个值的HTTP请求，其中一个是下拉列表中所选项目的索引＆＃39; 0＆＃39;对于＆＃39; A＆＃39;，＆＃39; 1＆＃39;为＆＃39; B＆＃39;和＆＃39; 2＆＃39;对于＆＃39; C＆＃39;

如何获取所选项目的索引？

Answer 1

如果您要在click处理程序范围之外发送请求，则可以设置一个带有 null 值的变量，并在.click()上更新

var selected_index = null;
$('.dropdown-menu a').on('click', function(){    
  $(this).parent().parent().prev().html($(this).html() + '<span class="caret"></span>');
  selected_index = $(this).closest('li').index();
});

// ... HTTP request code with selected_index

Answer 2

试试这个，

$('.dropdown-menu a').on('click', function(){    
        $(this).parent().parent().prev().html($(this).html() + '<span class="caret"></span>');    
        var clicked_li_index = $("#demolist li").index( $(this).parent()) );
        alert(clicked_li_index);
    });

Answer 3

尝试使用.index()，您也可以删除代码中的其他</input>

Answer 4

您可以使用jQuery的index()方法来执行此操作。

<强> .index()

从匹配的元素中搜索给定元素。

这是一个例子

＆＃13;

var $dropDownItems = $('.dropdown').find('.dropdown-menu').children();

$dropDownItems.on('click', function() {
  console.log('index: ', $dropDownItems.index(this), 'text: ', this.textContent)
})

＆＃13;

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="dropdown">
  <a id="dLabel" data-target="#" href="http://example.com" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    <li><a href="#">A</a></li>
    <li><a href="#">B</a></li>
    <li><a href="#">C</a></li>
  </ul>
</div>

＆＃13;

html bootstrap下拉列表获取所选项目的索引

4 个答案: