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
330 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
  • 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

Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
document.write() deleting all existing HTML 5 52
How to combine and minify CSS and JS files 5 19
Code Manager | Snippits 2 37
Do alert on select 6 15
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
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.
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will learn how to dynamically set the form action using jQuery.

820 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