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

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 请求，其中之一是下拉列表中所选项目的索引，“0”代表“A”，“1”代表“B”和“2”对于“C”

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

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