I am trying to select the quantity value when the product options are changed. I've tried various jquery functions but I'm getting nowhere fast. I also have to think about multiple products being updated. I need to select the quantity so when the options are changed all the options/quantities are passed to the backend.
Can anyone help with this?
Here is a
jsfiddle showing my html/jquery.
I thought maybe I could iterate over each of the .qty classes and find the .list .qty <select> element but I'm not having much luck.
$(".qty").each(function()
{
// var name = $(this).attr('name');
// console.log(name);
//var x=$('.list').closest('select').find(':selected').val(); //find the value
var x=$('.qty').siblings('.list'); //find the value
console.log(x);
});
Use .list select to grab each select list:
$('.list select').each(function()
{
$(this).find('option').each(function() {
console.log($(this).val(), $(this).text());
}); //find the value
});
For just the value of the select with class qty, use can simply use:
var qty = $('select.qty option:selected').val();
console.log(qty);
Related
I have many select2 in one page so I want to get all selected option as a array
how it's possible?
i've tried this
console.log($("select").val());
but it just gives me the first selected option
I hope this will work :
var select = $("select");
var valArray = [];
select.each(function(index){
valArray.push($( this ).val());
});
console.log(valArray);
I have an unordered list (ul) whose list item (li) elements each contain a table with 2 columns (first column is a delete button (attribute 'data-id' contains the id of the data), second column is the data text). I need to get the values inside the table of each li and add the values to a hidden field for processing on the server. How would I go about retrieving the values from the table inside the li. I know how to loop through the ul itself and pull out each li...
$('#ol li').each(function (i, li) {
var listItem = li;
// Get data from table within li here
});
but I am not sure how to proceed after this step. Thank you for any help.
EDIT
Here is an example of what gets appended to the ol.
$('#ol').append("<li><table><tbody><tr><td style='padding-right:16px'><button type='button' class='btn btn-danger remove' data-id='" + item.val() + "'><b>X</b></button></td><td>" + txt + "</td></tr></tbody></table></li>");
SOLUTION
Using find() I was able to locate the desired elements and extract the values.
$('#ol li').each(function () {
var id = $(this).find('td').first().find('button').attr('data-id');
if(id == -1)
{
var txt = $(this).find('td').last().text();
$('#hf').val($('#hf').val() + txt + "|");
}
else
{
$('#hf').val($('#hf').val() + id + "|");
}
});
Thank you to those who assisted.
You should read up on the usage of the this keyword.
So, when you run a function like this -
$('#ol li').each(function(){
$(this).val() //returns the value of the current li that is being looped through
});
The way the .each() function works is the same way as a loop, so it goes through every #ol li element one at a time, and you utilize this to access the current element that is being looped through.
So now, from here, you can search for the required children. You will most likely also have to utilize jquery's .data() function to get the information stored in the data-id attribute.
https://api.jquery.com/jquery.each/
https://api.jquery.com/jquery.data/
You could get the two columns of the data like so:
$('#ol li').each(function (i, li) {
var listItem = li;
var column1 = $(li).find("td").first().text();
var column2 = $(li).find("td").last().text();
// do things with columns
});
I'm assuming you just have a 2x1 table with a simple text value in each.
I have a TableSorted table, and in each TD element are five SPAN elements. Four are always hidden, but upon clicking a div outside the table, certain spans are hidden dependent on which div is clicked.
I have the table sorting fine, but what I need is for the textExtraction to grab a different SPAN, depending on the value of the div which has been selected.
I've tried the following to no avail:
textExtraction:function(node){
var filter=$("div.career a.sel").text();
if(filter=="a"){var theindex=0;}
if(filter=="b"){var theindex=1;}
if(filter=="c"){var theindex=2;}
if(filter=="d"){var theindex=3;}
if(filter=="e"){var theindex=4;}
return $(node).find("span").eq(theindex).text();
}
What is the best way to achieve this?
The textExtraction function is only called when tablesorter is initialized or updated. Try triggering an update after the selection has changed.
var indexes = 'abcde'.split(''),
// Is this a select box?
$sel = $("div.career a.sel").on('change', function(){
$('table').trigger('update');
});
$('table').tablesorter({
textExtraction: function(node){
// if this is a select, get val(), not text()
var filter = $sel.val(),
theindex = $.inArray( filter, indexes );
return $(node).find("span").eq(theindex).text();
}
});
Update: for a link, try this:
var indexes = 'abcde'.split(''),
$careers = $("div.career a").on('click',function(){
var searcher = $(this).attr("rel");
$("div.career a").removeClass("sel");
$(this).addClass("sel");
$("td.stat span").hide();
$("td.stat span.career_" + searcher).show();
});
$('table').tablesorter({
textExtraction: function(node){
// find selected
var filter = $careers.filter('.sel').text(),
theindex = $.inArray( filter, indexes );
return $(node).find("span").eq(theindex).text();
}
});
Note: Don't use live() in jQuery version 1.9+, it was removed.
I have a 4 drop down list based on each drop down value the other drop down will change i tried to change the style of the drop down list using CSS and jquery and javascript.
I almost got the style of the drop down and the functionality also works fine, but where i am stuck is
In the jquery what is done is
$(document).ready(function(){
$("select").each(function(){
$(this).wrap('<div class="selectbox"/>');
$(this).after("<span class='selecttext'></span><span class='select-arrow'></span>");
var val = $(this).children("option:selected").text();
$(this).next(".selecttext").text(val);
$(this).change(function(){
var val = $(this).children("option:selected").text();
$(this).next(".selecttext").text(val);
});
});
});
so for all the select it automatically wraps with div and after that the 2 spans are placed.
So when i change the value on the 1 drop down for the first time the values of the 2nd drop down is changed .
When i again change the value of the 1 drop down the 2 drop down values does not reset to the default value.
Because the span hold the value of the previously selected value.. How can i overcome this.
Have you tried like this:
$(document).ready(function(){
$("select").each(function(){
$(this).wrap('<div class="selectbox"/>');
$(this).after("<span class='selecttext'></span><span class='select-arrow'></span>");
var val = $(this).children("option:selected").text();
$(this).next(".selecttext").text(val);
});
$("select").change(function(){
var val = $(this).children("option:selected").text();
$(this).next(".selecttext").text(val);
});
});
There is one data table with two rows, as per below image
When user click on 2bit it should highlight that TD in that column only. I achieved this using jQuery for one check box selection, but when multiple check box selection like 2 and 4 it should highlight both the TD.
http://jsbin.com/exazoh/edit#preview working example for single value highlight.
Code: http://jsbin.com/exazoh/2/edit
Try the following function:
jQuery(function() {
// on change of an input with a name starting with "bit-select"...
jQuery('input[name^="bit-select"]').change(function(){
var checked = this.checked,
val = this.value,
column = $(this).closest("th").index() + 1;
// for each td in the current column
jQuery("#tableData tr.data td:nth-child(" +
column + ")").each(function() {
var $td = $(this);
// does the current td match the checkbox?
if ($td.text() == val) {
if (checked)
$td.addClass("jquery-colorBG-highLight");
else
$td.removeClass("jquery-colorBG-highLight");
}
});
});
});
I had to add the value attributes to the second set of checkboxes.
Working demo: http://jsbin.com/exazoh/4/edit#preview
Or the short version, since I notice you were using .filter() originally:
jQuery(function() {
jQuery('input[name^="bit-select"]').change(function(){
var method = this.checked ? "addClass" : "removeClass",
val = this.value;
jQuery("#tableData tr.data td:nth-child("+($(this).closest("th").index()+1)+")")
.filter(function(){return $(this).text()==val;})[method]("jquery-colorBG-highLight");
});
});
Demo: http://jsbin.com/exazoh/5/edit