HTMLブートストラップドロップダウンが選択されている項目のインデックスを取得

Question

使用して、私はそれで問題がない

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

ブートストラップドロップダウンリストで選択した値を取得する方法についてstackoverflowの中に多くの答えがあります

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

が、その後、私はいくつかの値を持つHTTPリクエストを作成する必要があり、その1つは 'A'、 'B'のための '1'、 'C​​'のための '2'

選択したアイテムのインデックスを取得するにはどうすればよいですか？

Answer 1

ですそれで.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

はまた、あなたがあなたがそれを行うにはjQueryのindex()メソッドを使用することができますウルのコードで

Answer 4

を追加</input>を削除することができ、.index()を使用してみてください、これを試してみてください。

.index()

マッチした要素の中から指定された要素を検索します。ここで

あなたはclickハンドラのスコープの外に要求を送信している場合は、ヌル値と更新して変数を設定することができます例

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>