We Keep Coding

Reset a list after a reset of the dropdown selection

I have made a list. I've added some dropdown to sort the list. Once its sorted, I would like to be able to reset the dropdown back to nothing. (Accomplished that already). But the list doesn't update back to as if nothing was selected. How can I do that?
Code im using to manipulate the list:
<script>
$.noConflict();
jQuery( document ).ready(function( $ ) {
$('.container').on("change", 'select', function() {
var type = $('#BBFHtype').val().toLowerCase(),
surface = $('#BBFHsurface').val().toLowerCase(),
sticking = $('#BBFHsticking').val().toLowerCase(),
panel = $('#BBFHpanel').val().toLowerCase(),
height = $('#BBFHheight').val().toLowerCase(),
thickness = $('#BBFHthickness').val().toLowerCase();
var table = $("#BBFHDoors");
var trs = table.find('tr');
trs.hide();
var filtered = trs.filter(function(index, elem) {
var tds = $(elem).find('td');
if (type !== "all" && tds.eq(1).text().trim().toLowerCase() !== type) {return false;}
if (surface !== "all" && tds.eq(2).text().trim().toLowerCase() !== surface) {return false;}
if (sticking !== "all" && tds.eq(3).text().trim().toLowerCase() !== sticking) {return false;}
if (panel !== "all" && tds.eq(4).text().trim().toLowerCase() !== panel) {return false;}
if (height !== "all" && tds.eq(5).text().trim().toLowerCase() !== height) {return false;}
if (thickness !== "all" && tds.eq(6).text().trim().toLowerCase() !== thickness) {return false;}
return true;
})
filtered.show();
if (filtered.length == 0) {
alert("No Records Found!!!");
}
});
});
</script>
Code im using to reset the selections back to nothing:
$(function () {$("#btnReset").bind("click", function ()
{$("#BBFHtype")[0].selectedIndex = 0;
$("#BBFHsurface")[0].selectedIndex = 0;
$("#BBFHsticking")[0].selectedIndex = 0;
$("#BBFHpanel")[0].selectedIndex = 0;
$("#BBFHheight")[0].selectedIndex = 0;
$("#BBFHthickness")[0].selectedIndex = 0;
});});
Ive tried playing around with .prop and .attr(selected), and removeattr(). But haven't been successful. EX: $("#BBFHtype")[0].prop("selected", true);
Any help would be awesome!

Just trigger change on the select elements:
$('select').trigger('change');
Complete function:
$(function () {$("#btnReset").bind("click", function ()
{$("#BBFHtype")[0].selectedIndex = 0;
$("#BBFHsurface")[0].selectedIndex = 0;
$("#BBFHsticking")[0].selectedIndex = 0;
$("#BBFHpanel")[0].selectedIndex = 0;
$("#BBFHheight")[0].selectedIndex = 0;
$("#BBFHthickness")[0].selectedIndex = 0;
$('select').trigger('change');
});});
Also, see complete working demo here

ng-change not working even sometimes with Select tag?

HTML
<select ng-model="selectedName" ng-change="retrieveSelectedClass()" ng-options="(item.name||item) group by item.groupName for item in names"
class="code-helper" id="code-helperId">
<option value="">Select Option</option>
</select>
JavaScript
var globalEditor1 = null;
var globalMergeEditor = null;
var widgets = [];
var timeout;
var app = angular.module('myApp', []);
var previousValue;
app.controller('OrderFormController', function($scope, $http) {
$scope.retrieveSelectedClass = function() {
$scope.isPaneShown = true;
if ($scope.selectedName === undefined) {
$scope.isPaneShown = false;
return;
}
if ($scope.selectedName.groupName === 'Create New') {
if (globalEditor1) {
if (!globalEditor1.isClean()) {
var r = confirm("You have unsaved changes, are you sure you want to proceed ?");
if (r != true) {
$('.code-helper').val(previousValue);
$scope.isPaneShown = false;
return;
}
}
}
$scope.isPaneShown = false;
} else {
if (globalEditor1) {
if (!globalEditor1.isClean()) {
var r = confirm("You have unsaved changes, are you sure you want to proceed ?");
if (r != true) {
$('.code-helper').val(previousValue);
$scope.isPaneShown = false;
return;
}
}
}
}
}
});
$(document).ready(function() {
$('.code-helper').select2({
placeholder: 'Select a command to begin'
});
$('.code-helper').on('select2:selecting', function(evt) {
console.log($('.code-helper').val());
previousValue = $('.code-helper').val();
});
});
I have ng-model, attached, but still sometimes the ng-change function is not getting called, this happens only in this scenario.
When a change is detected: !globalEditor1.isClean() = true then I am trying to replace the selected value with the previous value.
This happens fine. But now when I try to change the value from select tag, it does not fire the ng-change event.
jsfiddle
Click here
Steps to reproduce:
Try the following: run the link again.
then step
1) From the drop down select "AccountProcessorTest"
2) select ok from alert
3) Select "AddPrimaryContact" and from alert select cancel
4) now the previous value is retained.
5) now select "AddPrimaryContact" again.
The event wont fire.

This works:
ng-change="retrieveSelectedClass(selectedName, '{{selectedName}}')"
JS
$scope.retrieveSelectedClass = function(newValue, oldValue) {
var oldValueSelected = {};
if (angular.isUndefined(oldValueSelected.id) && oldValue.indexOf('"id"') !== -1) {
oldValueSelected = JSON.parse(oldValue);
}
var possibleOldValues = $filter('filter')($scope.names, {
id: oldValueSelected.id
}, true);
oldValue = possibleOldValues[0];
}

jQuery multi-faceted filter issue.

I'm building a simple faceted filter to help users find the right condo. A few days ago I got a basic slider to filter out condos by square footage. The next part was getting the checkboxes to work which I posted to SO here and got some help from icecub. Since then I've been working on getting them to work in tandem (for example, checking 2 bedrooms and sliding the slider down to 800 sqft filters the condos by both variables). Got this to work yesterday.
The only issue I'm having is that now the slider only works when one of the two checkbox's are checked. If both or none are checked the slider doesn't work. I'm not sure exactly where my logic is flawed.
Here's a fiddle https://jsfiddle.net/baskinco/mwqkztn8/
and here's the JS
// FUNCTIONS
//make slider textbox equal to slider value
function printValue(sliderID, textbox) {
var x = document.getElementById(textbox);
var y = document.getElementById(sliderID);
x.value = y.value;
}
//get bdrm and slider values
function getValues() {
var bdrm1 = false;
var bdrm2 = false;
var sliderValue;
if($("#1bdrm").is(':checked')){
bdrm1 = true;
}
if ($("#2bdrm").is(':checked')){
bdrm2 = true;
}
sliderValue = $("#rangeValue").val();
runFilter(bdrm1, bdrm2, sliderValue);
}
function runFilter(bdrm1, bdrm2, sliderValue) {
$.each($('.condo-box'), function() {
$this = $(this);
condoData = $this.data();
if(bdrm1 && !bdrm2){
if ((condoData.bdrms == 1) && (condoData.sqft <= sliderValue)){
$this.show();
} else {
$this.hide();
}
} else if(bdrm2 && !bdrm1){
if ((condoData.bdrms == 2) && (condoData.sqft <= sliderValue)){
$this.show();
} else {
$this.hide();
}
} else {
$this.show();
}
});
}
// Set values for units
$('#jackson').data({
id:1,
sqft:897,
bdrms:2
});
$('#nicholl').data({
id:2,
sqft:808,
bdrms:2
});
$('#atwood').data({
id:3,
sqft:1020,
bdrms:2
});
//etc
//MAIN SCRIPT
$(document).ready(function() {
//print slider value to slider textbox
printValue('slider','rangeValue');
//when a bdrm box is checked ..
$("#1bdrm, #2bdrm").click(function(){
getValues();
});
//when the slider is moved
$("#slider").change(function() {
getValues();
});
});

Your else condition isn't checking the sqft and slider, it should be:
else {
if ((condoData.sqft <= sliderValue)){
$this.show();
} else {
$this.hide();
}
}
https://jsfiddle.net/mwqkztn8/1/
Or, even simpler, that whole thing could just be:
$.each($('.condo-box'), function() {
$this = $(this);
condoData = $this.data();
var sqftFilter = (condoData.sqft <= sliderValue);
var bedFilter = (!bdrm1 && !bdrm2) || (condoData.bdrms == 1 && bdrm1) || (condoData.bdrms == 2 && bdrm2);
$this.toggle(sqftFilter && bedFilter);
});
https://jsfiddle.net/mwqkztn8/3/

set limit in selection for sumo dropdown

I have used this jquery plugin SumoSelect for drop-down select with check-box
<select multiple="multiple" class="SlectBox" name="cat_ids[]">
<option value="op1">Options1</option>
<option value="op2">Options2</option>
<option value="op3">Options3</option>
<option value="op4">Options4</option>
<option value="op5">Options5</option>
</select>
This drop-down working fine with check-bow selections.
But I want to put some limitation for different users with this selection.
I have tried below jquery code but it not working proper
jQuery(document).ready(function($){
var last_valid_selection = null;
$('.SlectBox').change(function(event) {
if ($(this).val().length > 2) {
alert('You can only choose 2!');
$(this).val(last_valid_selection);
} else {
last_valid_selection = $(this).val();
}
}); });

You can use sumo methods unSelectAll and selectItem and the triggerChangeCombined option on the plugin init.
Ref: http://hemantnegi.github.io/jquery.sumoselect/
In the change event if the limit is raised you can deselect all and set the last valid selection by the index of each element.
Code:
$('#island').SumoSelect({ triggerChangeCombined: true, placeholder: "TestPlaceholder" });
var last_valid_selection = null;
$('#island').change(function (event) {
if ($(this).val().length > 2) {
alert('You can only choose 2!');
var $this = $(this);
$this[0].sumo.unSelectAll();
$.each(last_valid_selection, function (i, e) {
$this[0].sumo.selectItem($this.find('option[value="' + e + '"]').index());
});
} else {
last_valid_selection = $(this).val();
}
});
Demo: http://jsfiddle.net/IrvinDominin/80xLm01g/

There is better sample.
Dont forgot triggerChangeCombined: true
var last_selection = null;
var load_selection = false;
$('#SeasonIdList').change(function (event) {
if (load_selection == true) {
return false;
}
if ($(this).val() != null && $(this).val().length > 3) {
load_selection = true;
var $this = $(this);
$this[0].sumo.unSelectAll();
$.each(last_selection, function (i, e) {
$this[0].sumo.selectItem($this.find('option[value="' + e + '"]').index());
});
load_selection = false;
} else {
last_selection = $(this).val();
}
});

How to make random selector only pick shown items?

Yeah not very familiar with JQuery and I'm trying to make a random lunch picker for our web team.
http://jsfiddle.net/vy8RL/1/
I want to hide certain items. For example when you hit the "Quick Eats" button it only displays 4 options and when you hit "EAT ME" it still selects the LI's that are hidden. Is there any way to allow it only to select options that are visible?
$(document).ready(function() {
$("#button").click(function(){
random();
});
$("#unhealthy-food").click(function(){
$(".unhealthy").hide();
});
$("#all").click(function(){
$("li").show();
});
$("#fast-food").click(function(){
$(".food").hide();
$(".fast").show();
});
});
function random() {
$("li.selected").removeClass("selected");
var menuItems = $("ul#list li");
var numItems = menuItems.length;
if(window.sessionStorage && window.sessionStorage.getItem("selected")) {
previous = Number(window.sessionStorage.getItem("selected"));
} else {
previous = -1;
}
var selected = Math.floor(Math.random()*numItems);
while(selected === previous && numItems > 1) {
selected = Math.floor(Math.random()*numItems);
}
if(window.sessionStorage) window.sessionStorage.setItem("selected", selected);
$("ul#list li:nth-child("+(selected+1)+")").addClass("selected");
}

You can use the :visible selector:
function random() {
$("li.selected").removeClass("selected");
var menuItems = $("#list li").filter(':visible');
var numItems = menuItems.length;
// ...
menuItems.eq(selected).addClass("selected");
}
Please note that I have replaced the $("ul#list li:nth-child("+(selected+1)+")") with the cached collection + eq() method.
http://jsfiddle.net/3n9ex/

here you go. I just added tracking of menu preference. Also added $(".food").show(); in line 9 to correct a bug.
$(document).ready(function() {
var user_choice = ".food";
$("#button").click(function(){
random(user_choice);
});
$("#unhealthy-food").click(function(){
user_choice = "li:not(.unhealthy)";
$(".food").show();
$(".unhealthy").hide();
});
$("#all").click(function(){
$("li").show();
user_choice = ".food";
});
$("#fast-food").click(function(){
$(".food").hide();
$(".fast").show();
user_choice = ".fast";
});
});
function random(user_choice) {
$("li.selected").removeClass("selected");
var menuItems = $(user_choice);
console.log(menuItems);
var numItems = menuItems.length;
if(window.sessionStorage && window.sessionStorage.getItem("selected")) {
previous = Number(window.sessionStorage.getItem("selected"));
} else {
previous = -1;
}
var selected = Math.floor(Math.random()*numItems);
while(selected === previous && numItems > 1) {
selected = Math.floor(Math.random()*numItems);
}
if(window.sessionStorage) window.sessionStorage.setItem("selected", selected);
$(menuItems[selected]).addClass("selected");
}
http://jsfiddle.net/vy8RL/19/