Expiring Today—Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
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
Medium Priority
?
333 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 2000 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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

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
Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
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 is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

719 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