SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Something like this, where the second one only shows when the 6th option (that being index 5) is selected?

    Code javascript:
    jQuery(function ($) {
        $([name="firstselectbox"]).change(function () {
            $([name="secondselectbox"]).hide();
            if (this.selectedIndex === 5) {
                $([name="secondselectbox"]).show();
            }
        });
    });
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    Something like this, where the second one only shows when the 6th option (that being index 5) is selected?

    Code javascript:
    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.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    In that case, check that the selectedIndex is 1 instead of 5.

    Or, you could check that this.value === 'VB'
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    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:

    Code:
    $(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,

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by neo_phyte View Post
    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".
    One way to achieve that is to trigger the change event of the select field as a part of the page loading.

    Quote Originally Posted by neo_phyte View Post
    2. By default selectbox2 is required, when I click submit it will ask for a values even it is not showing.
    That depends on what you are using to validate it with. What is it that says values are required.

    Quote Originally Posted by neo_phyte View Post
    3. how can I set it to jQuery, that selectbox2 will required only if selectbox 1 selected VB?
    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.

    Quote Originally Posted by neo_phyte View Post
    4. When user selectbox1 with another value, the selectbox2 should be NULL value. How can I do this?
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •