javacriptを使用してボタンの選択値を取得する方法

Question

私はボタンで開発したドロップダウンリストと検索クエリを入力するためのテキストフィールドがある検索バーに次のコードがあります。

ボタンで、私は

document.getElementById('').value; 

を使用してテキストを取得していますクリックしてくださいしかし、どのようにドロップダウンボタンの選択したテキストを取得することができますか？

マイコード：

<div class="input-group"> 
    <div class="input-group-btn search-panel"> 
     <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" > 
      <span id="search_concept">T Shirts</span> <span class="caret"></span> 
     </button> 
     <ul class="dropdown-menu" role="menu"> 
      <li><a href="#its_equal">Watches</a></li> 
     </ul> 
    </div> 
    <input type="hidden" name="search_param" value="all" id="search_param"> 
    <input type="text" class="form-control" id="niket" placeholder="Search term..."> 
    <span class="input-group-btn"> 
     <button class="btn btn-default" type="button" id="apply"><span class="glyphicon glyphicon-search"></span> 
     </button> 
    </span> 
</div> 

Answer 1

あなたはブートストラップを使用しているように見えます。ブートストラップコンポーネントにはしばしばjQueryが必要です。値を取得するドロップダウンアイテムのそれぞれにクリックハンドラをバインドするには、jQueryを使用します。この場合は<a>タグです。

変数に値を格納し、検索ボタンがクリックされたときにその値を取得できます。

(function(window, document, $, undefined) { 
 

 
    var dropdownValue; 
 

 
    /* Search dropdown menu for items that hold values we want, ".dropdown-menu a" */ 
 
    $('.dropdown-menu a').each(function(i, item) { 
 

 
    /* Add click handler to each one, whenever one is clicked the 
 
     dropdownValue variable is updated with it's value */ 
 
    $(this).on('click', function(e) { 
 
     dropdownValue = this.innerText; 
 
    }); 
 

 
    }); 
 

 
    /* Retrieve dropdown value */ 
 
    $('#apply').on('click', function(e) { 
 
    alert(dropdownValue); 
 
    }); 
 

 
}(window, window.document, jQuery));

<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> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="input-group"> 
 
    <div class="input-group-btn search-panel"> 
 
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 
 
     <span id="search_concept">T Shirts</span> <span class="caret"></span> 
 
    </button> 
 
    <ul class="dropdown-menu" role="menu"> 
 
     <li><a href="#its_equal">Watches</a> 
 
     </li> 
 
     <li><a href="#its_equal">Ties</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
    <input type="hidden" name="search_param" value="all" id="search_param"> 
 
    <input type="text" class="form-control" id="niket" placeholder="Search term..."> 
 
    <span class="input-group-btn"> 
 
     <button class="btn btn-default" type="button" id="apply"><span class="glyphicon glyphicon-search"></span> 
 
    </button> 
 
    </span> 
 
</div>

変数を作成し、それを更新する必要はありませんので、別の方法は、検索ボタンをクリックしたときにそのための選択<a>タグおよびクエリにクラスを適用することであろう。