asked on

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

I 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

Robert Schutt

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

ASKER CERTIFIED SOLUTION

Robert Schutt

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

jxharding

ASKER

Wow.
Thank you so much!!!

Table with seperate ListBox in seperate &lt;td&gt;, display “N/A” listbox over specific listbox so its hidden - IE8

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