html bootstrap dropdown獲取所選項目的索引

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請求，其中之一是下拉菜單中“ A”的“ 0”，“ B”的“ 1”和“ C”的“ 2”的所選項目的索引'

如何獲得所選項目的索引？

Answer 1

如果要在click處理程序范圍之外發送請求，則可以設置一個具有空值的變量，然后在.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()方法來實現。

。指數（）

從匹配的元素中搜索給定的元素。

這是一個例子

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

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

 <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>