jQuery: hide second selectbox

I am new with jQuery, as I know this can be done thru jQuery. I have two selectboxes. I just want it something like this, when I select a value in my first selectbox the second selectbox will show. And when I select different value on my first selectbox, my second selectbox will hide. Meaning, there is one value in my first selectbox that has the ability to show the second selectbox.

Please help on this.

Thanks

Something like this, where the second one only shows when the 6th option (that being index 5) is selected?


jQuery(function ($) {
    $([name="firstselectbox"]).change(function () {
        $([name="secondselectbox"]).hide();
        if (this.selectedIndex === 5) {
            $([name="secondselectbox"]).show();
        }
    });
});

Yes, but I want something like this… In the first selectbox, three options namely, VB course, Javascript course, PHP course. When user select VB course, the second selectbox show with two options namely, VB.NET and VB6. When user selects other options of the first selectbox, the second selectbox will hide.

In that case, check that the selectedIndex is 1 instead of 5.

Or, you could check that this.value === ‘VB’

Thank you so much, I get the idea from you.

Here is a little issue, hope you can help me… Here is my code below

this works to me now:


$(document).ready(function () {
	$('#webform-component-select_2').hide();
	
	$('#edit-submitted-select').change(function () {
		$('#webform-component-select_2').hide();
		if (this.value === 'VB') {
			$('#webform-component-select_2').show();
		}
	});
});

but I want something like this and I have an issue.

  1. By default selectbox 2 is hide, it will just show when user selectbox value “VB”.

  2. By default selectbox2 is required, when I click submit it will ask for a values even it is not showing.

  3. how can I set it to jQuery, that selectbox2 will required only if selectbox 1 selected VB?

  4. When user selectbox1 with another value, the selectbox2 should be NULL value. How can I do this?

Thanks,

One way to achieve that is to trigger the change event of the select field as a part of the page loading.

That depends on what you are using to validate it with. What is it that says values are required.

Normally you cannot guarantee that javscript (or jQuery) scripting will always work. As a result, on the server side you should ignore the selectbox 2 value and only pay attention to it if the selectbox 1 value is appropriate.

Why does jQuery think that field is required.

One way is to completely remove selectbox2 from the form. The whole select box could be stored as a data value and retrieved only when you need to show it.