Search jQuery

jQuery Forum

Form select chain event

in Getting Started • 8 years ago

Hi, i have 3 select boxes which contain categories, sub categories and a further sub category. Is there anyway i can do a chain event so the last 2 are disabled but the first one is enabled.

Upon selecting a category in the first form select the second form select becomes available. Then once the 2nd form select has been selected this makes the last one become available.

I have created a fiddle of my select boxes - http://jsfiddle.net/L4t83nvz/

Any help with this matter would be greatly appreciated.

Replies(5)

Sµßhrånil∂

Re: Form select chain event

8 years ago

$(function(){
$('select').change(function() {
var disabled = $.trim($(this).val()) == '';
var nextSelect = $(this).parents('.col-xs-4').nextAll().find('select');
var prevSelect = $(this).parents('.col-xs-4').prevAll().find('select');
if (disabled) {
nextSelect.val(''); // Clear
prevSelect.prop('disabled', true).first().prop('disabled', disabled);
}
nextSelect.prop('disabled', true).first().prop('disabled', disabled);
});
});

See it here http://jsfiddle.net/L4t83nvz/1/

Majid Lot..

Re: Re: Form select chain event

8 years ago

Hi Sµßhrånil∂ ,

I like this technique, but to be honest I did not understand the code work, can you please explain how the code work :

$(function(){
$('select').change(function() {
var disabled = $.trim($(this).val()) == '';
var nextSelect = $(this).parents('.col-xs-4').nextAll().find('select');
if (disabled) {
nextSelect.val(''); // Clear
}
nextSelect.prop('disabled', true).first().prop('disabled', disabled);
});
});
Thanks.

richard1

Re: Form select chain event

8 years ago

Excellent - thank so much works perfect.

Sµßhrånil∂

Re: Form select chain event

8 years ago

Majid here is things i did.

$('select').change(function() { //Attached change event to all select
var disabled = $.trim($(this).val()) == ''; //onchange checking value is blank or not and returning Boolean, if it blank it will return true else false so that variable will be true or false.
var nextSelect = $(this).parents('.col-xs-4').nextAll().find('select'); // Taking all select element next to current select element. All select elements are inside a div having class col-xs-4. So from current select moved parent div, from parent div select all select
//if current dropdown value is blank then setting value blank for all drop downs next to it.
if (disabled) {
nextSelect.val(''); // Clear
}
//Seeting all next dropdown as disabled then enabling/disabling immediate next dropdown based upon previous one's value which is stored in disabled variable. If previous one is blank then next will one will be disabled else enabled and disabled variable stored true or false.
nextSelect.prop('disabled', true).first().prop('disabled', disabled);
})

Majid Lot..

Re: Form select chain event

8 years ago

Excellent Sµßhrånil∂ , very good explaination, I appreciate your time and help.

thanks again.

Top Reply

Response title

Attachments

jQuery Forum

Form select chain event

Replies(5)

Re: Form select chain event

Re: Re: Form select chain event

Re: Form select chain event

Re: Form select chain event

Re: Form select chain event

Statistics

Tags

Actions