web-dev-qa-db-ja.com

特定のIDでBootstrap DropDownから選択したアイテムの値を取得

Bootstrap 3とJavaScriptを使用して、独自の「ComboBox」を「作成」しています。 Here is the JSFiddle これまでのところ、

HTML：

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

JavaScript：

$(document).on('click', '.dropdown-menu li a', function() {
    $('#datebox').val($(this).html());
});

このアプローチは、この "ComboBox"をページ上で数回繰り返すまで、うまく機能します。問題は、ANY/ALL '.dropdown-menu li a'を検索するJQuery関数にあります。

IDdemolistを持つULのonlyに見えるようにJQueryを変更し、そのselectedvalue？

私は次のことを試みましたが成功しませんでした：

'#demolist .dropdown-menu li a'を試しましたが、関数は起動しません：

$(document).on('click', '#demolist .dropdown-menu li a', function() {
    $('#datebox').val($(this).html());
});

Click of＃demolistを呼び出してみましたが、#dateboxはではなく#demolistのすべてのリスト項目のHTMLを取得しますアイテムのselectedinnerHTML：

$('#demolist').on('click', function(){
    $('#datebox').val($(this).html());
});

更新：

実用的なソリューションは次のとおりです。

$('#demolist li a').on('click', function(){
    $('#datebox').val($(this).html());
});

[〜＃〜] or [〜＃〜]

$('#demolist li').on('click', function(){
    $('#datebox').val($(this).text());
});
javascriptjqueryhtmltwitter-bootstrap
27
lucidgold
$('#demolist li').on('click', function(){
    $('#datebox').val($(this).text());
});

http://jsfiddle.net/kcpma/18/

31
Ryan

Bootstrapを使用したデザインコード

<div class="dropdown-menu" id="demolist">
  <a class="dropdown-item" h ref="#">Cricket</a>
  <a class="dropdown-item" href="#">UFC</a>
  <a class="dropdown-item" href="#">Football</a>
  <a class="dropdown-item" href="#">Basketball</a>
</div>
  • jqueryコード
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  $(document).ready(function () {
    $('#demolist a').on('click', function () {
      var txt= ($(this).text());
      alert("Your Favourite Sports is "+txt);
    });
  });
</script>
1
TauFeeQ

セレクタは_#demolist.dropdown-menu li a_になりますidとクラスの間にスペースがないことに注意してください。ただし、より一般的なアプローチをお勧めします。

_<div class="input-group">                                            
    <input type="TextBox" Class="form-control datebox"></input>
    <div class="input-group-btn">
    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">A</a></li>
        <li><a href="#">B</a></li>
        <li><a href="#">C</a></li>
    </ul>
</div>


$(document).on('click', '.dropdown-menu li a', function() {
    $(this).parent().parent().parent().find('.datebox').val($(this).html());
}); 
_

idではなくクラスを使用し、parent().find()を使用することで、重複するjsなしで、ページ上に好きなだけこれらを含めることができます

1
Steve

よく働く。

<input type="text" name="cat_q" id="cat_q">  

$(document).ready(function(){
    $("#btn_cat div a").click(function(){
       alert($(this).text());

    });
});
0
Michael Bobis

試してみましたか

$('#datebox li a').on('click', function(){
    //$('#datebox').val($(this).text());
    alert($(this).text());
});

わたしにはできる ：）

0
Yohann Lopez

JQueryコードを少し変更して_'#demolist li a'_にすると、li要素内のテキストではなく、リンク内のテキストが明確に選択されます。これにより、問題を引き起こすことなくサブメニューを使用できます。また、タグを具体的に選択しているため、$(this).text();を使用してアクセスできます。

_$('#datebox li a').on('click', function(){
    //$('#datebox').val($(this).text());
    alert($(this).text());
});
_
0
JoBaxter