We Keep Coding

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

jquery clone with HTML drop down option two drop down select the same value an alert should select different value

Currently working on jquery clone where user click add it will clone the div perfectly but I have dropdown. If user select cellphone in drop down and in other dropdown if user select the same cellphone it should duplicate found and the dropdown value has to clear.
$('.slt_major select option:selected').each(function(i, e) {
alert("check");
//Check if values match AND if not default AND not match changed item to self
if ($(e).val() == cI.val() && $(e).val() != 0 && $(e).parent().index() != cI.index()) {
alert('Duplicate found!');
cI.val('0');
}
});
I was not able to see where the error was even the alert was not generating. Here is the fiddle link.
Thanks.

So here it is: DEMO
First I would like to correct your adding part since you were adding duplicate ids into internal elements of cloned row. So just change your code as below and check for inline comments.
$(document).on("click", ".btn_more", function () {
var $clone = $('.cloned-row:eq(0)').clone();
$clone.find('[id]').each(function(){
this.id=this.id +(count) //change the id of each element by adding count to it
});
$clone.find('.btn_more').after("<input type='button' class='btn_less1 phn_del' value='Del' id='buttonless"+count+"'/>")
$clone.attr('id', "added"+(count)); //just append count here
$clone.find('.preferred').attr('checked', false);
$clone.find('.sslt_Field').val(0);
$clone.find('.txt_CC').val('');
$clone.find('.txt_Pno').val('');
$(this).parents('.em_pho').after($clone);
count++; //increment count at the end.
});
Now to check for duplicate options you can do it as below. Also check inline comments:
//attach event handler to document since you need event delegation on dynamically created elements
//attach change event to class 'sslt_Field'
$(document).on('change','select.sslt_Field',function(event) {
var cI = $(this); //store a reference
var others=$('select.sslt_Field').not(cI);
//store reference to other select elements except the selected one
$.each(others,function(){
//iterate through remaining selects
if($(cI).val()==$(this).val() && $(cI).val()!="")//check if value has been
//already selected on other select
{
$(cI).val('');//empty the value
alert('already selected');//display alert.
}
});
});

How to control check element from jquery dropdown button

I've used this jQuery dropdown button. This is my fiddle. This is the step of this:
So, the functionality:
At the time of selecting one option, a new box will appearing containing the title of that option. For example, if you click on the "Low" on the dropdown, a new box will come containing text, "Low" with a cross button.
I've written the script like this:
$('.low-option input[type=checkbox]').change(function(){
if($(this).prop('checked')){
$('#low-box').show();
} else {
$('#low-box').hide();
}
});
If you remove the boxes by clicking cross button, the box will be removed and adjacent checkbox will be unchecked.
So, I wrote this:
$('.option-box').on('click', '.cross', function() {
$(this).parent().remove();
});
if($('#low-box').is(":hidden")) {
$('.low-option input[type=checkbox]').prop('checked', false);
}
div.option-content is hidden at first. If any div.option-box will be visible, div.option-content will be visible too. If there is no div.option-box visible, div.option-content will be hidden always.
To do this, I wrote this:
var count = $('.option-content .option-box').is(":visible").length;
if (count > 0){
$('.option-content').show();
} else{
$('.option-content').hide();
}
But, my script is not working properly. As, I am not very good at jQuery, I can't find the reason and can't make it right way. Can you please help me removing the problem in the script?

Here I rewrite your code so it will become more scalable.. The important part that you missed is to relate/connect the checkbox with your option-box, so it will be easier for you to hide or show related element.. Check out this working Fiddle.
$('.dropdown-menu input[type=checkbox]').change(function(){
if($(this).prop('checked')){
$('.option-content').show();
$('.option-content #'+$(this).prop('id')).show();
} else {
$('.option-content #'+$(this).prop('id')).hide();
if($('.option-content .option-box:visible').length == 0){
$('.option-content').hide();
}
}
});
$('.option-box').on('click', '.cross', function() {
$('.dropdown-menu #'+$(this).parent().prop('id')).prop('checked', false);
$(this).parent().remove()
if($('.option-content .option-box:visible').length == 0){
$('.option-content').hide();
}
});
Cheers..

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