Table with seperate ListBox in seperate <td>, display “N/A” listbox over specific listbox so its hidden - IE8

Posted on 2014-03-26
Last Modified: 2014-03-26
I have a demo  here on jsfiddle

 Concept of showing/ hidingI have a table with 2 td's, and there is a listbox inside each <td>
I also have a third Listbox, which is disabled, and has a single entry with the words "Not Applicable".

The listboxes are populated with code-behind, and I cannot remove or add to
ListBoxA or ListBoxB, as it is an existing system which I need to make a minor change to and I am not allowed to change the code-behind to a hiddenfield scenario.

My question please, I have a dropdown with two options:

    1. Show A and Hide B
    2. Show B and Hide A

Open in new window

When option 1 is selected, How can I move ListBoxNotApplicable to Display over ListBoxB,
and thus it will look like ListBoxB shows 'Not Appicable'
And same for option 2 - where the ListBoxNotApplicable then displays over ListBoxA and then ListBoxB is displayed to the user

    <select id="lstSelect">
            <option value="1">Show A and Hide B</option>
            <option value="2">Show B and Hide A</option>

                    <select size="4" multiple="multiple" id="ctl00_lst1" style="height: 138px; width: 188px;">
                        <option value="168">A1</option>
                        <option value="169">A2</option>
                        <option value="170">A3</option>
                        <option value="171">A4</option>
                    <select size="4" multiple="multiple" id="ctl00_lst2" style="height: 138px; width: 188px;">
                        <option value="168">B1</option>
                        <option value="169">B2</option>
                        <option value="170">B3</option>
                        <option value="171">B4</option>
                    <select size="4" multiple="multiple" id="ctl00_lst3" disabled="disabled" style="height: 138px; width: 188px;">
                        <option value="Not Applicable">Not Applicable</option>

Open in new window

Question by:jxharding
  • 2
LVL 35

Expert Comment

by:Robert Schutt
ID: 39955669
You can use something like this:
    var coverlist = $('#ctl00_lst' + this.selectedIndex);
    if (coverlist.length == 1) { // selected index 1/2
        var offs = $(coverlist[0]).offset();
        $('#ctl00_lst3').css({'position': 'absolute', 'display': 'block', 'left': offs.left + 'px', 'top': + 'px'});
    } else { // selected index 0
        $('#ctl00_lst3').css({'position': 'relative', 'display': 'none'});

Open in new window

LVL 35

Accepted Solution

Robert Schutt earned 500 total points
ID: 39955809
Oops, I just noticed that I switched the show/hide logic around, here is an alternative: (note that I switched the values of the options around in the html)
    var coverlist = $('#ctl00_lst' + this.value);
    if (coverlist.length == 1) { // selected index 1/2
        var offs = $(coverlist[0]).offset();
        $('#ctl00_lst3').css({'position': 'absolute', 'display': 'block', 'left': offs.left + 'px', 'top': + 'px'});
    } else { // selected index 0
        $('#ctl00_lst3').css({'position': 'relative', 'display': 'none'});

Open in new window


Author Closing Comment

ID: 39958174
Thank you so much!!!

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Understanding mobile browsers 9 64
Java script read and write file - save as location 8 43
CSS: Making Pure CSS read more boxes thinner 5 31
innerHTML 7 16
Learn by example how to specify CSS selectors for Selenium WebDriver test automation software.
Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question