html Bootstrap-Drop-Down-Index des ausgewählten Elements

Question

Es gibt viele Antworten in Stackoverflow bekommen, wie den ausgewählten Wert eines Bootstrap-Drop-Down bekommen

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

Ich habe kein Problem mit, dass die Verwendung

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

aber Danach muss ich eine HTTP-Anfrage mit mehreren Werten machen, und eine davon ist der Index des ausgewählten Elements der Dropdown-Liste '0' für 'A', '1' für 'B' und '2' für 'C'

Wie kann ich den Index des ausgewählten Artikels abrufen?

Answer 1

Wenn Sie die Anfrage außerhalb von click Handler Rahmen senden, können Sie eine Variable mit einem null Wert und Aktualisierung eingestellt es auf .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

dies versuchen,

$('.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

versuchen .index() verwenden, können Sie auch den zusätzlichen </input> in ur-Code

Answer 4

entfernen Sie index() Methode jQuery verwenden können, das zu tun.

.index()

Suche für ein bestimmtes Element aus den Elementen angepasst.

Hier ist ein Beispiel

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>