toolman Posted June 8, 2016 Share Posted June 8, 2016 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 Quote Link to comment https://forums.phpfreaks.com/topic/301315-show-element-when-specific-option-is-selected/ Share on other sites More sharing options...
maxxd Posted June 8, 2016 Share Posted June 8, 2016 $('#location').on('change',function(){ if($(this).val() == 'loc5'){ $('#second').css({ opacity: 1 }); } }); Of course, you'll need to set the secondary element to 0 opacity in the stylesheet. Quote Link to comment https://forums.phpfreaks.com/topic/301315-show-element-when-specific-option-is-selected/#findComment-1533485 Share on other sites More sharing options...
Psycho Posted June 8, 2016 Share Posted June 8, 2016 (edited) 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 June 8, 2016 by Psycho 1 Quote Link to comment https://forums.phpfreaks.com/topic/301315-show-element-when-specific-option-is-selected/#findComment-1533486 Share on other sites More sharing options...
maxxd Posted June 8, 2016 Share Posted June 8, 2016 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! Quote Link to comment https://forums.phpfreaks.com/topic/301315-show-element-when-specific-option-is-selected/#findComment-1533490 Share on other sites More sharing options...
Psycho Posted June 8, 2016 Share Posted June 8, 2016 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. Quote Link to comment https://forums.phpfreaks.com/topic/301315-show-element-when-specific-option-is-selected/#findComment-1533492 Share on other sites More sharing options...
maxxd Posted June 8, 2016 Share Posted June 8, 2016 Hunh. I thought 'visibility: hidden' behaved more like 'display: none' - good to know. Thanks for running the tests and posting your findings! Quote Link to comment https://forums.phpfreaks.com/topic/301315-show-element-when-specific-option-is-selected/#findComment-1533495 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.