We Keep Coding

How can I simplify this select function?

I don't know anything about javascript. I just found this snippet in the web when I was trying to find a solution on how to achieve what I need. Is there any way to simplify this since I will be adding around 40 elements that I need to show and hide.
var $selects = $('.filters select');
$selects.on('change', getValues).first().trigger("change");
function getValues() {
var vals = $selects.map(function() {
return this.value;
}).get();
if (vals.join('') === "a1b2c3") {
$(".box_wrapper").not(".a1b2c3").hide();
$(".a1b2c3").show();
$('html,body').animate({
scrollTop: $(".a1b2c3").offset().top},
'slow');
}
else if (vals.join('') === "d4e5f6") {
$(".box_wrapper").not(".d4e5f6").hide();
$(".d4e5f6").show();
$('html,body').animate({
scrollTop: $(".d4e5f6").offset().top},
'slow');
}
else{
$(".vid_box").hide();
}
}
I think I can simplify this further by getting the joined value from the select boxes and use it on the function above and since I am using the same value combination for the class. I just don't know how. Is that possible? Thanks in advance guys!

Perhaps something like this (air code):
var $selects = $('.filters select');
$selects.on('change', getValues).first().trigger("change");
function getValues() {
var vals = $selects.map(function() {
return this.value;
}).get();
var values = [ "a1b2c3", "d4e5f6" ];
var vj = vals.join('');
if (values.indexOf(vj) !== -1) {
$(".box_wrapper").not("." + vj).hide();
$("." + vj)).show();
$('html,body').animate({
scrollTop: $("." + vj)).offset().top
}, 'slow');
}
else {
$(".vid_box").hide();
}
}

I would suggest something like this.
var $selects = $('.filters select');
$selects.on('change', function() {
var value = $selects.map(function() {
return this.value;
}).get();
$(".box_wrapper").not("." + value).hide();
$(".box_wrapper." + value).show();
$('html, body').animate({
scrollTop: $("." + value).offset().top},
'slow');
});
$selects.first().trigger("change");

Here is my final code. Thanks #MJH for all the help.
var $selects = $('.filters select');
$selects.on('change', getValues).first().trigger("change");
function getValues() {
var $selects = $('.filters select');
$selects.on('change', getValues).first().trigger("change");
function getValues() {
var vals = $selects.map(function() {
return this.value;
}).get();
var vwarp = vals.join('');
if (vwarp == vwarp) {
$(".box_wrapper").not("." + vwarp).hide();
$("." + vwarp).show();
$('html,body').animate({
scrollTop: $("." + vwarp).offset().top},
'slow');
}
else{
$(".box_wrapper").hide();
}
}
Hope this helps!

row delete but not removing the corersponding value from the total from the label using jquery

Currently working on jquery date picker with my current code where I can able to clone the row and i can able to add years and months. But when i try click add more it will create one more row and again i can able to add from date and to date it was calculating perfectly but when i click the delete button it was deleting the row but not removing the corresponding value.
here is what i tired for delete
$(document).on('click', ".btn_less1", function() {
var len = $('.cloned-row3').length;
if (len > 1) {
$(this).closest(".btn_less1").parent().parent().parent().remove();
uppdiff();
}
});
Here is the fiddle link for rest of the code
Thanks in advance

The order you defined your function was wrong, the function uppdiff was not found since it was defined much later. I rearranged your code as shown below:
$(function() {
var diffDays = 0;
$.datepicker.setDefaults({
dateFormat: "mm/dd/yy",
changeMonth: true,
yearRange: "-100:+0",
changeYear: true,
maxDate: new Date(),
showButtonPanel: false,
beforeShow: function() {
setTimeout(function() {
$('.ui-datepicker').css('z-index', 99999999999999);
}, 0);
}
});
var valid = true;
function uppdiff() {
if (valid) {
var dateStart = [];
var dateEnd = [];
$.each($('.datepicker'), function() {
if ($(this).hasClass('startDate'))
dateStart.push($(this).datepicker('getDate'))
else
dateEnd.push($(this).datepicker('getDate'))
});
diffDays = 0;
$.each(dateStart, function(key, value) {
$.each(dateStart, function(key2, value) {
if (key !== key2 && !(dateStart[key] >= dateEnd[key2] || dateEnd[key] <= dateStart[key2])) {
alert('Date ranges overlap');
valid = false;
return valid;
}
});
diffDays += parseInt((dateEnd[key] - dateStart[key]) / (1000 * 60 * 60 * 24));
return valid;
});
var year = parseInt(diffDays / 365);
var date = diffDays - (365 * year);
var month = parseInt(date / 30);
//document.getElementById("txt_expy").innerHTML = year + " year";
//document.getElementById("txt_expm").innerHTML = month + " Month";
if(year >= 0){
$("#txt_expy").text(year + " year");
}
if(month >= 0){
$("#txt_expy").text(month + " Month");
}
}
}
$(".cloned-row3").find(".datepicker").removeClass('hasDatepicker').datepicker();
var count = 0;
$(document).on("click", ".exp_add_button", function() {
var $clone = $('.cloned-row3:eq(0)').clone(true, true);
$clone.find('[id]').each(function() {
this.id += 'someotherpart'
});
$clone.find('.btn_more').after("<input type='button' value='Delete Row' class='btn_less1 selbtnless' id='buttonless'/>")
$clone.attr('id', "added" + (++count));
/*$clone.find(".degree_Description").attr('disabled', true).val('');*/
$clone.find("input.startDate,input.endDate")
.val('')
.removeClass('hasDatepicker')
.removeData('datepicker')
.unbind()
.datepicker();
$(this).parents('.wrk_exp').after($clone);
});
$(document).on('change', ".datepicker", function() {
var valid = true;
$.each($('.datepicker'), function() {
if ($(this).val() == "") {
valid = false;
return false;
}
uppdiff();
});
uppdiff();
});
$(document).on('click', ".btn_less1", function() {
var len = $('.cloned-row3').length;
if (len > 1) {
$(this).closest(".btn_less1").parent().parent().parent().remove();
uppdiff();
}
});
});
Here is the updated JSFiddle

Move items between two ListBoxes in ASP.Net using JQuery

I want to move items between two Listboxes in ASP.Net using JQuery/Javascript and below is my code which is working perfectly.
function AddItems() {
var totalItemsSelected = 0;
var CurrentItems = 0;
var MessageLabel = document.getElementById('<%=lblITProgrammingMessage.ClientID%>');
var selectedOptions = jQuery('#<%=ListITProgramming.ClientID %> option:selected');
if (selectedOptions.length == 0) {
MessageLabel.innerHTML = "Please select skill(s) to add.";
jQuery('#<%= lblITProgrammingMessage.ClientID %>').fadeOut(2000, function () { MessageLabel.innerHTML = ""; });
jQuery('#<%= lblITProgrammingMessage.ClientID %>').fadeIn(500, function () { });
return false;
}
jQuery('select[name$=ListMyITProgramming] > option').each(function () { CurrentItems++; });
if (CurrentItems == 30) {
MessageLabel.innerHTML = "Maximum limit (30) is reached. You cannot add any more skills.";
jQuery('#<%= lblITProgrammingMessage.ClientID %>').fadeOut(2000, function () { MessageLabel.innerHTML = ""; });
jQuery('#<%= lblITProgrammingMessage.ClientID %>').fadeIn(500, function () { });
return false;
}
totalItemsSelected = CurrentItems + selectedOptions.length;
if (totalItemsSelected > 30) {
MessageLabel.innerHTML = "You can only select " + (30 - CurrentItems) + " item(s) more.";
jQuery('#<%= lblITProgrammingMessage.ClientID %>').fadeOut(2000, function () { MessageLabel.innerHTML = ""; });
jQuery('#<%= lblITProgrammingMessage.ClientID %>').fadeIn(500, function () { });
return false;
}
if (selectedOptions.length == 1) {
if (jQuery("#<%=ListMyITProgramming.ClientID %> option[value='" + selectedOptions.val() + "']").length > 0) {
}
else {
jQuery('#<%=ListMyITProgramming.ClientID %>').append(jQuery(selectedOptions).clone());
}
}
else if (selectedOptions.length > 1) { jQuery(selectedOptions).each(function () { if (jQuery("#<%=ListMyITProgramming.ClientID %> option[value='" + this.value + "']").length > 0) { } else { jQuery('#<%=ListMyITProgramming.ClientID %>').append(jQuery(this).clone()); } }); }
jQuery(selectedOptions).remove();
var hdn2 = "";
jQuery('select[name$=ListMyITProgramming] > option').each(function () { hdn2 += jQuery(this).attr('value') + ','; });
jQuery("#<%= listMyITProgrammingValues.ClientID %>").val(hdn2);
return false;
}
But this code is limited for only one set of ListBoxes as I have hard coded the ListBox names 'ListITProgramming' and 'ListMyITProgramming'.
Can anyone make this dynamic with two parameters in existing function?

Enclose the list control in an old-fashioned HTML tag with a known, hardcoded ID. Example:
<DIV id="List1Container">
<ASP:ListBox runat="server" id="list1"/>
</DIV>
In your Javascript, access the list control using the div's ID (List1Container) and jquery's ":first-child" selector. Ta da! You can now reference the list control without knowing its ID at all, so you don't have to do that messy code injection any more.
Bonus: Using this technique, you can now write fully static .js files, which means you can use minification and caching and greatly improve performance.

put a value with javascript on the url

Is there a way to add the select-result on the url when the pop up window appears?
The select-result gives the value of the boxes selected and i want to pass the values selected gto a form but i am not ussing a form. can i pass the values ussing the url?
i want to add the selected values like form.php?id=2882,222,22412,23
$(function() {
$(".selectable").selectable({
filter: "td.cs",
stop: function() {
var result = $("#select-result").empty();
var result2 = $("#result2");
$('.ui-selecting:gt(31)').removeClass("ui-selecting");
confirmation($(".ui-selected").length + " box selected. "+($(".ui-selected").length));
function confirmation() {
var answer = confirm($(".ui-selected").length + " box selected. "+($(".ui-selected").length));
if (answer){
window.open ("form.php","mywindow","menubar=no,resizable=no,width=650,height=700");
}
else{
}
}
$('#divmsg').html($(".ui-selected").length + " box selected")
$('#divmsg2').html($(".ui-selected").length)
if ($(".ui-selected").length > 90) {
alert("Selection of only 90 boxes allowed");
$('#divmsg').html($('#divmsg').html() + ",<br><b>Message: Selection of only 90 pixels allowed!!</b>");
$(".ui-selected").each(function(i, e) {
if (i > 3) {
$(this).removeClass("ui-selected");
}
});
return;
}
$(".ui-selected", this).each(function() {
var cabbage = this.id + ', ';
result.append(cabbage);
});
var newInputResult = $('#select-result').text();
newInputResult = newInputResult.substring(0, newInputResult.length - 1);
result2.val(newInputResult);
}
});
});
this is the fiddle
http://jsfiddle.net/dw6Hf/57/
Thanks in advance
​

Append the value to the querystring. Basic idea:
window.open ("form.php?foo=" + bar,"mywindow"...

jQuery selectable limit

I am trying to add limit of 6 selectable rows but i can't make it work. Any help!!
<script>
$(function() {
$(".selectable").selectable({
filter: "td.cs",
stop: function() {
var result = $("#select-result").empty();
var result2 = $("#result2");
$(".ui-selected", this).each(function() {
var cabbage = this.id + ', ';
result.append(cabbage);
});
var newInputResult = $('#select-result').text();
newInputResult = newInputResult.substring(0, newInputResult.length - 1);
result2.val(newInputResult);
}
});
});​
</script>
Thanks in advance!!!

You can use the selecting event callback to do this like following
$( "#selectable" ).selectable({
selecting: function(event, ui) {
if ($(".ui-selected, .ui-selecting").length > 6) {
$(ui.selecting).removeClass("ui-selecting");
}
}
});​
Working Fiddle
Reference: selecting event