Hide dropdown duplicates when originally hidden - javascript

I am successfully using the blow code to remove duplicate values from a drop down field
$(document).ready(function () {
var usedNames = {};
$("select > option").each(function () {
if (usedNames[this.value]) {
$(this).remove();
} else {
usedNames[this.value] = this.text;
}
});
});
My problem is that some of my drop downs are conditional, so they are not on the page when the code fires, they are set to display:hidden, and input hidden, then depending on a previous drop down selcect they are shown.
So how can I fire the code when the drop down appears??

If you have no ability to add code where the dropdown is being set to visible, your only solution may be to set a repeating timer to constantly check.
var interval = setInterval(function(){
// Check to see if the thing is still hidden
if(!$("#id_of_option").is(':hidden')){
clearInterval(interval); // stop checking
// Run your other code here to clear out duplicates
}
}, 200); // or some number of milliseconds

Related

Javascript help-Menu

Want to make it so when my menu items transition away, the search bar pops up.
let menuItemsQuerySelector = document.querySelectorAll(".menu-item");
searchElement.addEventListener("click", function() {
console.log("Clicked search");
menuItemsQuerySelector.forEach(function(menuItem) {
console.log("Boom");
menuItem.classList.toggle("hide-item");
});
});
};
this is what i have so far to make the toggle animation work. my claases for the search bar are, search-from, i need to make it active somehow when the menu disappears. The css class is already set up.
You can use the "transitionend" event to execute code after the transition ends.
You would have to add a boolean to check whether the transition was hidden-visible or visible-hidden
let hidden = false;
searchElement.addEventListener("click", function() {
hidden = true;
//your other code
});
//Further down the line when showing your elements again
hidden = false;
However seeing that you have multiple elements that transition at the same time, you could either:
Hook the event only on one of them
menuItemsQuerySelector[0].on('transitionend', () => {
if(hidden)
//your code here
});
or Use a timed function
setTimeout(() => {
if(hidden)
//your code here
}, <delay in millisecods>);

Display Error Message For Select If Expand Then Closed Without Selection Made In JQuery

I have a select and i'm after displaying an error message as soon as the user expands the select and closes it without making a selection but i cant figure how to do this.
I have it validating on.change if the val matches the default as shown below
Working JQuery When An Option Is Selected
$('#orderPosition').change(
function () {
if ($('#orderPosition').val() == 'orderPositionDefault') {
$('#orderErrorMessage').show();
$('#orderPosition').focus();
$('#orderPosition').css("background-color", "lightcoral");
} else {
$('#orderErrorMessage').hide();
$('#orderPosition').css("background-color", "transparent");
}
}
);
I have tried the following
$('#orderPosition').on('click', function () {
// var isDirty = !this.options[this.selectedIndex].defaultSelected;
var changed = $(this).val() != $(this).data('orderPositionDefault');
alert(changed ? 'changed' : 'not changed');
if (changed) {
$('#orderErrorMessage').show();
} else {
$('#orderErrorMessage').hide();
}
});
But the issue with the above is as soon as i click in the select the error message is displayed, i need it to be displayed of the user clicks in it and closes it straight away without making a selection.
Use the blur event for executing code when focus leaves on an input field.
$('select').on('change', function() {
//change things here
}).on('blur', function() {
//when select is no longer in focus here
});
Documentation: https://www.w3schools.com/tags/ev_onblur.asp

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
}));

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)
});

Can I restore a value after mouseout with jquery?

I've created this fiddle to display my issue.
I'm setting the selected value after a user clicks a rating but would like to remove the selected value when a user hovers over again.
If they move away from the star area I want to select the original value if it was selected.
This will allow them the option to select another rating but show the previously selected rating if they mouse out.
Here is my attempt with jquery:
$('.star').click(function(e) {
e.preventDefault();
var rating = this.firstChild.data;
if (rating > 0) {
$('.star.star_'+rating).addClass('hovered');
// Trying to remove class if hovered but replace selected value when I mouse out
/*
$('.star_container').hover(function() {
$('.star.star_'+rating).removeClass('hovered');
});
*/
}
});
Any way I can accomplish this?
http://jsfiddle.net/d4uPX/13/
What I did was when the user clicks an element, attach the rating as a data value for reference.
$('.star_container').data('rating', rating);
Then here is your hover function:
$('.star').hover(function() {
$('.star').removeClass('hovered');
}, function(){
$('.star.star_'+ $('.star_container').data('rating')).addClass('hovered');
});
My solution, just uses a closured variable to store rating... and then checks if it's been set. Should work for you (and you don't have to reselect your container every time to grab the data element):
http://jsfiddle.net/d4uPX/17/
var rating;
$('.star').click(function(e) {
e.preventDefault();
rating = this.firstChild.data;
if (rating > 0) {
$('.star.star_'+rating).addClass('hovered');
}
});
$('.rating_container').hover(
function() {
$('.star.star_'+rating).removeClass('hovered');
},
function() {
if(rating){
$('.star.star_'+rating).addClass('hovered');
}
}
);

Categories