Solved

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

Posted on 2014-03-26
3
331 Views
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>select</option>
            <option value="1">Show A and Hide B</option>
            <option value="2">Show B and Hide A</option>
    </select>  

    <table>
            <tr>
                <td>
                    <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></td>
                <td>
                    <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></td>
    
                <td>
                    <select size="4" multiple="multiple" id="ctl00_lst3" disabled="disabled" style="height: 138px; width: 188px;">
                        <option value="Not Applicable">Not Applicable</option>
    
                    </select></td>
            </tr>
        </table>
    

Open in new window

0
Comment
Question by:jxharding
[X]
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
3 Comments
 
LVL 35

Expert Comment

by:Robert Schutt
ID: 39955669
You can use something like this: http://jsfiddle.net/amaj6/2/
$('#lstSelect').change(function(){
    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': offs.top + 'px'});
    } else { // selected index 0
        $('#ctl00_lst3').css({'position': 'relative', 'display': 'none'});
    }
});

Open in new window

0
 
LVL 35

Accepted Solution

by:
Robert Schutt earned 500 total points
ID: 39955809
Oops, I just noticed that I switched the show/hide logic around, here is an alternative: http://jsfiddle.net/amaj6/3/ (note that I switched the values of the options around in the html)
$('#lstSelect').change(function(){
    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': offs.top + 'px'});
    } else { // selected index 0
        $('#ctl00_lst3').css({'position': 'relative', 'display': 'none'});
    }
});

Open in new window

0
 

Author Closing Comment

by:jxharding
ID: 39958174
Wow.
Thank you so much!!!
0

Featured Post

Webinar: Aligning, Automating, Winning

Join Dan Russo, Senior Manager of Operations Intelligence, for an in-depth discussion on how Dealertrack, leading provider of integrated digital solutions for the automotive industry, transformed their DevOps processes to increase collaboration and move with greater velocity.

Question has a verified solution.

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

Suggested Solutions

FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
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…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

752 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