Jump to content

show element when specific option is selected


toolman

Recommended Posts

Hi there,

I have the following code:

    <select id="location" name="drop">        <option value="loc1">Location 1</option>        <option value="loc2">Location 2</option>        <option value="loc3">Location 3</option>        <option value="loc4">Location 4</option>        <option value="loc5">Location 5</option>        <option value="loc6">Location 6</option>        <option value="loc7">Location 7</option>      </select>    <select id="second" name="term">    <option value="OPT1">Option 1</option>    <option value="OPT2">Option 2</option>    <option value="OPT3">Option 3</option>    <option value="OPT4">Option 4</option>  </select>

 

What I would like to do is to show the second select field only when "Location 5" is selected in the first drop down.

 

How would I do this?

 

Thanks

 

Link to comment
Share on other sites

No disrespect to @maxxd, but there are some details not covered

 

1. Since OP did not mention if JQuery is being used, I will point that out. The JQuery library will need to be included (if not already) if you want to use JQuery code (which is a good idea to learn anyway)

 

2. The on() handler requires that the elements have already been initialized before that code is loaded in order to be applied. So, the code  would need to be wrapped in a $(document).ready() handler or something similar.

 

3. The use of opacity seems odd to me. From a CSS perspective the hidden or display attributes would seem more logical options. But, if JQuery is being used there are the built in hide() and show() methods.

 

4. The biggest issue is that code will only display the element when loc5 is selected. I have to assume that when the user selects any other value the element should go back to being hidden.

 

5. Lastly, since the values that hide the element can change over time, rather than setting a default display value in CSS and assuming that the initial value will always use that style, I think it would be better to have the change function executed onload. That way if the initial value is one that should be hidden or shown it will be taken care of. For example, if the form is being used to edit an existing record and that record has a value of 5, then the initial state of the 2nd select list should be to be displayed.

 

Here is a fully functioning example script

 

<!DOCTYPE html>
<html>
 
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
 
    $(document).ready(function(){
        //Create event handler for onchange event
        $('#location').on('change',function(){
            //Array of values that should hide 2nd element
            var hiddenVals = ['loc5'];
            //Change hide/show status of 2nd element
            if(jQuery.inArray( $(this).val(), hiddenVals ) != -1) {
                $('#second').show();
            } else {
                $('#second').hide();
            }
        });
        //Run event handler on page load
        $('#location').change();
    });
 
</script>
</head>
 
<body>
 
    <select id="location" name="drop">
        <option value="loc1">Location 1</option>
        <option value="loc2">Location 2</option>
        <option value="loc3">Location 3</option>
        <option value="loc4">Location 4</option>
        <option value="loc5">Location 5</option>
        <option value="loc6">Location 6</option>
        <option value="loc7">Location 7</option>
    </select>
    <select id="second" name="term">
        <option value="OPT1">Option 1</option>
        <option value="OPT2">Option 2</option>
        <option value="OPT3">Option 3</option>
        <option value="OPT4">Option 4</option>
    </select>
 
</body>
</html>
Edited by Psycho
  • Like 1
Link to comment
Share on other sites

No disrespect taken - it was a quick and dirty answer, honestly.

 

I almost went so far as to use .toggle() instead of .css(), but had a meeting to go to. The only thing about using opacity instead of toggle(), hide(), show(), or display/visibility is that opacity will leave the element in the DOM. Which can be a pain for form processing (there will be extra variables in there that you don't really care about), but it will still at least take up the physical space in the DOM so that anything beneath the second select element won't suddenly reflow upwards.

 

At any rate, thanks for fleshing out the example and pointing out the omissions!

Link to comment
Share on other sites

The only thing about using opacity instead of toggle(), hide(), show(), or display/visibility is that opacity will leave the element in the DOM. Which can be a pain for form processing (there will be extra variables in there that you don't really care about), but it will still at least take up the physical space in the DOM so that anything beneath the second select element won't suddenly reflow upwards.

 

I'm pretty sure the "visibility: hidden" CSS property will leave the element in the DOM as well as the page will still act as if the element is there. Whereas the "display" attribute removes the element. (or maybe I have those backwards). In any event, I was curious as to how opacity = 0 would differ from visibility = none. For example, I wondered if text could be selected on the page, if it would print, etc.

 

I've found that for opacity=0 and visibility=none the output (mostly) looks and behaves similarly. In both instances the hidden content takes up the space as if it was displayed. However, there is a difference. You CAN select the content that is hidden using opacity=0 whereas the content hidden using the visibility=hidden you cannot. There is one caveat though. You can't select part of that content, you have to select a visible element before and after the content using opacity=0 and the hidden content will also be selected (confirmed via a Copy\Paste).

 

Here's the code I used to test with

 

Display None: [<span style="display: none;">DisplayNone</span>]<br>
Visibility Hidden: [<span style="visibility: hidden;">VisibilityHidden</span>]<br>
Opacity 0: [<span style="opacity: 0;">Opacity0</span>]<br>
Opacity .5: [<span style="opacity: .5;">Opacity.5</span>]<br>

 

I'm not sure I see a definitive use for one vs. the other unless you believe that the user selecting the page content is a legitimate scenario. In which case you would want to use the appropriate style based on whether you wanted them to copy that content or not.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.