JQueryを使用してリストから複数の値を渡す方法

Question

私は動的に構築され、選択ボックスと同じ機能を果たす次のリストを持っています。

<ul class="list-group" name="combobox1" id="combobox1"> 
<li class="list-group-item" value="6" />Option 1</li> 
<li class="list-group-item" value="12" />Option 2</li> 
<li class="list-group-item" value="15" />Option 3</li> 
</ul> 

リスト内のアイテムを作るために、クラスに「アクティブ」追加するユーザのjQuery I選択された「リスト基アイテムアクティブ」。

リストから1つまたは複数のリスト項目を選択し、[詳細を表示]をクリックすると、ポップアップで詳細が表示されます。この詳細ポップアップは、ボタン内のonclick関数によってトラップされます。私の質問は、JQueryを使用して、ユーザーがonclickメソッドで渡すことを選択したリスト内の1つ以上の項目の値を取得する方法です。

onclick=showDetails(itemsvalues) 

これは1つの値を返しますが、複数の項目が選択された場合はどうなりますか？

onclick="showdetails($('#combobox1 li.active').val()); 

ありがとうございます！

Answer 1

var activeItems = $('.list-group-item.active'); 

これは、すべてのアクティブなアイテムの配列を提供します。 そこからループして値を取得できます。

$.each(activeItems, function(key, item){ 
    $(item).val(); // this will give you the value of each active item. You can push it into an array or do what ever you need to with it from here 
}); 

フィドル：LI要素のためのすべての使用data-valueのhttps://jsfiddle.net/qc4y4102/1/

Answer 2

まず。 LIクリックで
は、ボタンにいくつかの.activeクラス
を追加.active要素のdata-value取得クリック：

$("[data-value]").on("click", function(){ 
 
    $(this).toggleClass("active"); 
 
}); 
 

 

 
$("#getValues").on("click", function(){ 
 
    var values = $("[data-value].active").map(function(){ 
 
    return $(this).data("value"); 
 
    }).get(); 
 
    alert(values); 
 
});

.active{ 
 
    background:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="list-group" name="combobox1" id="combobox1"> 
 
    <li class="list-group-item" data-value="6">Option 6</li> 
 
    <li class="list-group-item" data-value="12">Option 12</li> 
 
    <li class="list-group-item" data-value="15">Option 15</li> 
 
</ul> 
 

 
<button id="getValues">GET SELECTED VALUES</button>

が<li value="bla" />huh</li>をおさらいするには、無効なマークアップであるので、最初のジャンプの前にHTMLを習得することを忘れないでくださいJSに

Answer 3

.map()を使用して、セレクタに一致するすべての要素をループし、結果の配列を取得します。

$("#go").click(function() { 
 
    var items = $(".list-group-item.active").map(function() { 
 
    return $(this).data("value"); 
 
    }).get(); 
 
    $("#result").text("You selected " + items.join(', ')); 
 
}); 
 

 
$(".list-group-item").click(function() { 
 
    $(this).toggleClass("active"); 
 
});

.active { 
 
    background-color: yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="list-group" name="combobox1" id="combobox1"> 
 
    <li class="list-group-item" data-value="6" >Option 1</li> 
 
    <li class="list-group-item" data-value="12" >Option 2</li> 
 
    <li class="list-group-item" data-value="15" >Option 3</li> 
 
</ul> 
 
<button id="go">What did I select?</button> 
 
<div id="result"></div>