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
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Will your db performance match your db growth?

In Percona’s white paper “Performance at Scale: Keeping Your Database on Its Toes,” we take a high-level approach to what you need to think about when planning for database scalability.

Question has a verified solution.

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

Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

617 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