How to integrate sumoselect? - javascript

My js skills are very low, so sorry for this question. I need a multiselect to filter my boxes. The sumoselect plugin looks smart and I am able to run it, but I don´t know how to integrate it to my boxes. For example, if I select "Volvo & Mercedes" at my multiselect, I want that the other boxes fade out. At deselection all boxes are shown.
That´s my current status:
}(jQuery));
$(document).ready(function () {
$('.select').on('change', function(e) {
console.log($(this).val()) // value
}).SumoSelect({})
$('#submit').click(function(e){
e.preventDefault();
var v = $('#uq').val();
alert(v);
});
});
The Fiddle
Thanks for your help.

If you modify the box html a bit to include the values of the <select>
<span class="box" data-select_match="bmw">BMW</span>
Then you can filter the boxes based on the added attribute:
var $boxes = $('.box');
$('.select').on('change', function(e) {
var selected = $(this).val();
if(!selected ){
$boxes.show()
}else{
$boxes.hide().filter(function(){ // hide boxes then filter what gets shown
var select_match = $(this).data('select_match');
return selected.indexOf(select_match) > -1;
}).show();
}
}).SumoSelect({})
DEMO

Related

How to get onclick event for jQuery Chosen drodpown listbox?

Hi I am developing one jquery application. I ghave one dropdownbox with jquery choosen.
$(function () {
$(".limitedNumbSelect").chosen();
});
This is my dropdown and binding values from database.
<b>Awarded To:</b> <asp:ListBox ID="ddlvendorss" runat="server" SelectionMode="Multiple" class="limitedNumbSelect"></asp:ListBox>
I am trying to get click event for the above dropdown. As soon as i click on the dropodwn i want to fire a alert before loading any options.
$('#ddlvendorss').click(function (e) {
alert("I am going crazy");
});
In the below code checkedValues arrays contains some values(values present in dropdownlistbox). As soon as i click on the drodpown i ant to hide those values. But below code doesnt work.
$(".chzn-select").chosen().on('chosen:showing_dropdown', function () {
$(".limitedNumbSelect option").each(function () {
var val = $(this).val();
var display = checkedValues.indexOf(val) === -1;
$(this).toggle(display);
$('.limitedNumbSelect option[value=' + display + ']').hide();
$(".limitedNumbSelect").find('option:contains(' + display + ')').remove().end().chosen();
});
});
Above code does not work. May I get some advise on this? Any help would be appreciated. Thank you.
Chosen hides the select element, thus you are not actually clicking the element. However you can use chosen:showing_dropdown event
$(".chzn-select").chosen().on('chosen:showing_dropdown', function() {
alert('No need to go crazy');;
});
Fiddle
If you want to hide options, You can use
$(".chzn-select").chosen().on('chosen:showing_dropdown', function() {
//Find options and hide
$(this).find('option:lt(3)').hide();
//Update chosen
$(this).chosen().trigger("chosen:updated");
});
Fiddle
As per OP's code
$(".chzn-select").chosen().on('chosen:showing_dropdown', function () {
//Get all options
var options = $(this).find('option');
//Show all
options.show();
//Hide based on condtion
options.filter(function () {
return checkedValues.indexOf($(this).val()) === -1;
});
//Update chosen
$(this).chosen().trigger("chosen:updated");
});
instead on using on click, use on change e.g.:
jQuery('#element select').on('change', (function() {
//your code here
}));

select value to show another hidden dropdown box

I got this code for a website I am working on, but it does not work:
$(document).on('change', 'select[name="Discount"]', function() {
var $select = $(this);
var $partnerBlock = $select.closest('.col-md-2').siblings('.partner');
if ($select.val() === 'Yes') {
$partnerBlock.addClass('show');
} else {
$partnerBlock.removeClass('show');
}
});
What I want is hide the Partner dropdown by default, hiding it from everyone, and show it only when user set Discount to "Yes".
Hide it by default and then use an event listener on the change event for the dropdown.
https://jsfiddle.net/mco1sxcb/
You should use ids for your elements, easier to manipulate them.

Related dropdown menu issue

I'm polishing up a bit of jquery I wrote that works on 2 dropdown boxes. Basically, when the first dropdown is changed, it filters the second dropdown to show only the applicable choices. If the first choice (value: "none|") is chosen in the first dropdown, it shows no choices in the second
It works great, most of the time. Here's the issue: If you select the first choice in the first dropdown, the second dropdown clears out. But if you then choose another option in the first dropdown, the second stays empty when it shouldn't.
I'd appreciate if you can help me figure this out. You can find the dropdown boxes here: http://goinspire.com/jwrp-hotel-registration/.
PS: If it makes a difference (but I think it doesn't), it's a WordPress site and the form is generated by GravityForms.
PS: here's the code:
tripFilter = function () {
var tripClass = '.hotel-trip select',
hotelClass = '.hotel-name select',
unusedClass = '.unused-options select';
jQuery(tripClass).change(function(){
//testFunc();
var tripSelect = jQuery(tripClass),
trip = tripSelect.val(),
hotelSelect = tripSelect.parents('form').find(hotelClass);
if (trip === "none|"){
jQuery(hotelClass+" > option").each(function() {
jQuery(this).clone().appendTo(unusedClass);
jQuery(this).remove();
});
} else {
tripnum = trip.match(/JWRP (\d*)/)[1];
//var hotelChoices = [];
jQuery(unusedClass+" > option").each(function() {
jQuery(this).clone().appendTo(hotelClass);
jQuery(this).remove();
});
jQuery(hotelClass+" > option").each(function() {
hotelMatch = jQuery(this).val().match(/(\d*) /);
//console.log(hotelMatch);
if (hotelMatch === null || hotelMatch[1] != tripnum){
jQuery(this).clone().appendTo(unusedClass);
jQuery(this).remove();
//console.log("not a match!");
};
});
}
});
};
jQuery(document).ready(function () {
tripFilter();
});
jQuery(document).bind('gform_post_render', function(event, form_id){
if(form_id == 38) {
tripFilter();
}
});
If I have understood properly, first dropdowm guides second.
So, I think you might just add a listener on "change" event of first dropdown, to perform your function every time the value of first input goes through some change.
Try this way:
$(document).ready(function(){
$('#38').bind('change', tripFilter)
});

Trying to control select menu via jquery - simple thing but unable to achieve

I am trying to control select menu items via jquery and want to behave them like tabbing.. but no luck.. any help much appreciated.
Thanks in advance!
$('#box-wrap .box').eq(0).css({'display':'block'});
$('.select-menu').on('change', function(){
$('.select-menu option:selected').each(function(){
$('#box-wrap .box').fadeOut();
$('#'+ $(this).data('url')).fadeIn();
});
});
here is jsfiddle url:
http://jsfiddle.net/mufeedahmad/FLzQc/1/
Assuming that you want like this:
When option is selected from 1st select, the box should show as option from 1st select's selected option and when option is selected from 2nd select, then 2nd select selected option.
Code Used:
$('#box-wrap .box').eq(0).css({'display':'block'});
$('.select-menu').on('change', function(){
var option_id = $(this).find('option:selected').data('url');
$('.box').each(function(){
if($(this).attr('id') === option_id){
$(this).fadeIn();
} else {
$(this).fadeOut();
}
});
});
Fiddle Demo : http://jsfiddle.net/budhram/pUse5

jquery binding to select changes

I have a hidden select which should be automatically selected via a visible select, my jquery is:
$(document).ready(function() {
var selected_val = $('#id_foo option:selected').val();
$('#id_bar').val(selected_val);
$("#id_foo").change(function() {
selected_val = $(this).attr('value');
$('#id_bar').val(selected_val);
});
});
This works fine, but the page I am working on has the option to add a value to the (visible) select on the fly. How do I bind to this event and add this to the hidden list before updating the selected value?
The best way to tackle this is to update the hidden select with the new values when you update the visible one.
Or, as per my comment, you could populate the hidden select when the visible one is changed:
$("#id_foo").change(function() {
selected_val = $(this).attr('value');
//clear and re-populate all of hidden select here
$('#id_bar').val(selected_val);
});
This should do the trick:
$(function () {
var $bar = $('#id_bar');
var $foo = $('#id_foo');
$bar.val($foo.val());
$foo.change(function () {
var newValue = $(this).val();
if ($bar.find('[value="' + newValue + '"]').length === 0) {
$bar.append($('<option/>').val(newValue));
}
$bar.val(newValue);
});
});
Before setting the new value, checks if the value is an option. If it's not, add as an option.
This snippet correctly identifies the event and succesfully copies the select options from foo to bar. However it does not seem to set :selected correctly on either id_foo or id_bar and using DOMSubtreeModified feels hackish
$('#id_foo').bind("DOMSubtreeModified", function(){
var high = 0;
$('#id_foo').children().each(
function(){
if ($(this).val() > high) {
high = $(this).val();
}
}
);
$('#id_foo').val(high);
var new_options = $('#id_foo').clone();
$('#id_bar').html('');
$('#id_bar').append(new_options.children());
});
So, for now the best I could come up with:
$('#id_foo').bind("DOMSubtreeModified", function(){
location.reload();
});

Categories