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);
});
});
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);
What I'm trying to achieve
Clone a div and add it below the existing div(s) - jQuery 1 below
...in the div that is being cloned, I already have another jQuery running that shows/hides a child div based on a checkbox - jQuery 2 below
Issue
Cloning works fine. However, I can't get the show/hide based on checkbox to work
Question
Is this possible to do through jQuery? It seems like jQuery 2 doesn't understand that, post-cloning, there's a new div that also would like the same functionality of showing/hiding the child-div based on the checkbox.
jQuery 1
$(document).ready(function() {
var i = 0;
$('.button-add').click(function(){
$i = i++;
//we select the box clone it and insert it after the box
$copy = $('.copybox:first').clone();
$copy.find("input:checkbox").attr("data-related-item","hideconfig"+i);
$copy.find("div#hideconfig").attr("id","hideconfig"+i);
$copy.insertAfter(".copybox:last");
});
$(document).on("click", ".button-remove", function() {
$('.copybox:last').remove();
});
});
jQuery 2
function evaluate(){
var item = $(this);
var relatedItem = $("#" + item.attr("data-related-item"));
if(item.is(":checked")){
relatedItem.fadeIn();
}else{
relatedItem.fadeOut();
}
}
$('input[type="checkbox"]').click(evaluate).each(evaluate);
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.
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
I have two drop down boxes.One drop box has values as may the other as 1.Now i change the first drop down value to june but will not change second drop box value.Here it is not passing second drop box because i have initiated using click event.Here i use live(click)but do i do that w/o clicking 2nd drop box that value should also pass
**Updated**
$(firstselect).live(click,function)
$(secondselect).live(click,function)
Now that I understood the problem:
The second select box should show the value that was previously selected in the first one.
You could do like so:
var prevValue = $('#firstselect').val();
$('#firstselect').change(function() {
$('#secondselect').val(prevValue);
prevValue = this.value;
});
DEMO
Bidirectional:
var prevValue = {
'firstselect': $('#firstselect').val(),
'secondselect': $('#secondselect').val()
};
$('select').change(function() {
var other = this.id === 'firstselect' ? 'secondselect' : 'firstselect';
prevValue[other] = $('#' + other).val();
$('#' + other).val(prevValue[this.id]);
prevValue[this.id] = this.value;
});
DEMO 2