I have the following list that gets dynamically built and performs the same function as a select box would do.
<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>
When an item in the list is selected i user Jquery to append 'active' into the class to make 'list-group-item active'.
A user can select one or more list items from the list and click 'Show Details' which will give them details in a popup. This details popup is traggered by the onclick function in a button. My question is how do I use Jquery to get the values of one or more items in the list that a user has selected to pass via the onclick method?
onclick=showDetails(itemsvalues)
This returns one value, but what if there was more than one item selected?
onclick="showdetails($('#combobox1 li.active').val());
Thank you!
First of all use data-value for LI elements.
On LI click add some .active class
On button click get the data-value of the .active elements:
$("[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>
To recap <li value="bla" />huh</li> is invalid markup, so remember to first learn HTML before jumping into JS.
Use .map() to loop over all the elements that match a selector and get an array of the results.
$("#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>
var activeItems = $('.list-group-item.active');
That will give you an array of all the active items.
From there you can loop over them and grab the values.
$.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
});
Fiddle: https://jsfiddle.net/qc4y4102/1/
Related
I have some listings.
Currently id is test_3, test_1, test_2. I need number (3,1,2) from id of each li and append this number in to another data attribute. Please check the result section. It will give you an idea about what I am expecting. Thanks
Html
<ul id="cat">
<li id="test_3">Text 3</li>
<li id="test_1">Text 1</li>
<li id="test_2">Text 2</li>
</ul>
Script
$('#cat').attr('id').split("-")[2];
Expected result
<ul id="cat">
<li id="test_3" data-id="3">Text 3</li>
<li id="test_1" data-id="1">Text 1</li>
<li id="test_2" data-id="2">Text 2</li>
</ul>
To achieve this you can loop over the li elements and set the data() based on the number in the id attribute. Try this:
$('#cat li').each(function() {
$(this).data('id', this.id.split('_')[1]);
}).click(function() {
console.log($(this).data('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="cat">
<li id="test_3">Text 3</li>
<li id="test_1">Text 1</li>
<li id="test_2">Text 2</li>
</ul>
You can loop through all of the children of the ul element with the id cat.
On each loop, get the ID by getting the id attribute, splitting it on _ and getting the first index.
You can then set the attribute by using JQuery's attribute function, which you can learn more about here.
$('#cat li').each(function () {
var dataId = $(this).attr('id').split('_')[1];
$(this).attr('data-id', dataId);
});
An example of this in action
$('#cat li').each(function () {
var dataId = $(this).attr('id').split('_')[1];
$(this).attr('data-id', dataId);
});
console.log($('#cat').html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="cat">
<li id="test_3">Text 3</li>
<li id="test_1">Text 1</li>
<li id="test_2">Text 2</li>
</ul>
This should some your problem.
Using $(this).attr("id").split('_') will split "cat_3" into "cat" and "3" then using [1] after will select "3"
$("#cat li").each(function(){
$(this).attr("data-id", $(this).attr("id").split('_')[1]);
})
console.log($("#cat").html())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="cat">
<li id="test_3">Text 3</li>
<li id="test_1">Text 1</li>
<li id="test_2">Text 2</li>
</ul>
You can also use a RegExpression.
var suffix = "test_2".match(/\d+/); // results --> 2
Basically it fetches out numeric value within a string value.
Usage
$('#cat li').each(function() {
$(this).data('id', this.id.match(/\d+/));
})
I have this function so if I click for example ITEM 1, the sample1 and sample3 will become red because have that specific class (class1).
The problem is that if I click on another item (for example ITEM2), the red items of ITEM1 will remain red and I need them to turn black and highlight in red ONLY the items of current clicked class in the first list.
What to add to below ready(function() in order to do that? Thank you in advance!
<ul>
<li class="leftcol class1">ITEM 1</li>
<li class="leftcol class2">ITEM 2</li>
<li class="leftcol class3">ITEM 3</li>
<li class="leftcol class4">ITEM 4</li>
</ul>
<ul>
<li class="rightcol class1 class4">sample1</li>
<li class="rightcol class2 class3">sample2</li>
<li class="rightcol class3 class1">sample3</li>
<li class="rightcol class4 class2">sample4</li>
</ul>
This is the function:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.leftcol').click(function() {
$('.rightcol[class*=' + this.className.split(" ").pop() + ']').css('color', 'red');
});
});
</script>
Use classes to hold the styles, and then just remove the class on all elements, and add it back on the elements matching the class etc
$(document).ready(function() {
$('.leftcol').click(function() {
$('.rightcol').removeClass('red')
.filter('.'+ this.className.split(" ").pop())
.addClass('red');
});
});
.red {color: red}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="leftcol class1">ITEM 1</li>
<li class="leftcol class2">ITEM 2</li>
<li class="leftcol class3">ITEM 3</li>
<li class="leftcol class4">ITEM 4</li>
</ul>
<ul>
<li class="rightcol class1 class4">sample1</li>
<li class="rightcol class2 class3">sample2</li>
<li class="rightcol class3 class1">sample3</li>
<li class="rightcol class4 class2">sample4</li>
</ul>
Since you are not using class to style items, logic is this, on each click reset color of all items with class .rightcol and after reset add red to one u want. Try something like this:
$(document).ready(function() {
$('.leftcol').click(function() {
$('.rightcol').css('color', 'black');
$('.rightcol[class*=' + this.className.split(" ").pop() + ']').css('color', 'red');
});
});
Have you tried using a variable in which you store the name of the class that you last changed its color from? So whenever your function is called you can change the color back to default and update the variable.
Another option would be to first set all classes colors to default and then execute the line to change the color to red.
I have a list of elements li
<ol class="selectable" id="firstList">
<li class="ui-widget-content"> text 1</li>
<li class="ui-widget-content"> text 2</li>
<li class="ui-widget-content"> text 3</li>
</ol>
I want when I select one or more element in int the first list, these selected elements should be added to another list <ol>
<ol class="selectable" id="result">
</ol>
Simply you can do something like this
$('#firstList li').click(function() {
// click event handler for listening click event
$(this).toggleClass('selected');
// toggling selected class class
$('#result').html($('#firstList .selected').clone())
// updating result list with selected list item ( li which have selected class )
// use `.removeClass('selected')` if you want to remove selected class from clone
})
#firstList .selected {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ol class="selectable" id="firstList">
<li class="ui-widget-content">text 1</li>
<li class="ui-widget-content">text 2</li>
<li class="ui-widget-content">text 3</li>
</ol>
<ol class="selectable" id="result">
</ol>
i have 4 value all, dropdown Menu Item, another item, item three, the last one
<div class="search-bar-dropdown dropdown">
<div class="dropdown-container">
<p class="dropdown-button js-dropdown-button">All</p>
<ul class="dropdown-menu dropdown-select">
<li>Dropdown Menu Item</li>
<li>Another Item</li>
<li>Item Three</li>
<li>The Last One</li>
</ul>
<asp:hiddenfield id="_hdDropDown" runat="server"></asp:hiddenfield>
</div>
</div>
i don't know to how to set value in tag p and tag ul li to hiddenfield using javascript pls help me
Assuming you're using jQuery, try the following:
$(function () {
$(".dropdown-container p, .dropdown-container ul li").click(function () {
$("[id$=_hdDropDown]").val($(this).text());
});
});
HTML:
<div class="filter">
category 1
category 2
</div>
<ul class="items">
<li class="category-1">item 1</li>
<li class="category-1">item 2</li>
<li class="category-2">item 3</li>
<li class="category-2">item 4</li>
</ul>
What I want is for example clicking on 'category 1' link should hide all other category items from the list.
I understand jQuery's .filter() selector can be used but I'm not sure how to implement it for my purpose here.
Thanks for your help!
$('div.filter').delegate('a', 'click', function (event) {
$('ul.items li').hide().filter('.' + this.href.slice(this.href.indexOf("#") + 1)).show();
event.preventDefault();
});
Basically you'll be doing something like this: $('.items li').hide(); $('.category-1').show();
The first to hide all other menu items, the latter to show the selected ones :)
You can simply put it in the onclick of the <a> tag.