Thanks pcx99 and Randy for your reply and information.
If possible, I would like to avoid using iframe because there will be
too much amendment I have to do in my application.
The main problem I am facing right now is that the width I can assign
for each listbox is limited, but the text contents of each items in
listbox is pretty long. Thus, it will be hard for user to select items
that looks the similar.
First, I thought of using tooltip to assist user to select, but then I
got another simpler idea by using <span> to wrap the <select> tag. I
just set the <span> width to a certain value, and not restricting the
width in the <select> part.
Please take a look at the sample code below (tested in MSIE 6.0):
<!-- start sample code -->
<html>
<script>
function setLabelSpan(el ement){
var label = document.getEle mentById('label Span');
label.innerHTML =element.option s[element.selecte dIndex].text;
}
function setLabelNoSpan( element){
var label = document.getEle mentById('label NoSpan');
label.innerHTML =element.option s[element.selecte dIndex].text;
}
</script>
<body>
<form >
<table border="1" bordercolor="#0 00000">
<tr>
<td nowrap>Using Span </td>
<td><span style="overflow :hidden;width:1 50px">
<select name="select" border=0 onchange="setLa belSpan(this)">
<option value="">Select Product Code</option>
<option value="100">AE0 00 : Johnson's Baby Lotion (A/V)(G) -
100mlx24 </option>
<option value="101">AE0 01 : Johnson's Baby Lotion (A/V)(G) -
200mlx24 </option>
<option value="102">AE0 02 : Johnson's Baby Lotion (A/V)(G) -
400mlx24 </option>
<option value="103">AE0 03 : Johnson's Baby Lotion (A/V)(G) -
800mlx24 </option>
<option value="104">AE0 04 : Johnson's Baby Lotion (A/V)(G) -
100mlx72 </option>
<option value="105">AE0 05 : Johnson's Baby Lotion (A/V)(G) -
200mlx72 </option>
<option value="106">AE0 06 : Johnson's Baby Lotion (A/V)(G) -
400mlx72 </option>
<option value="107">AE0 07 : Johnson's Baby Lotion (A/V)(G) -
800mlx72 </option>
<option value="108">AE0 08 : Johnson's Baby Lotion (A/V)(N) -
100mlx24 </option>
<option value="109">AE0 09 : Johnson's Baby Lotion (A/V)(N) -
200mlx24 </option>
<option value="110">AE0 10 : Johnson's Baby Lotion (A/V)(N) -
400mlx24 </option>
<option value="111">AE0 11 : Johnson's Baby Lotion (A/V)(N) -
800mlx24 </option>
<option value="112">AE0 12 : Johnson's Baby Lotion (A/V)(N) -
100mlx72 </option>
<option value="113">AE0 13 : Johnson's Baby Lotion (A/V)(N) -
200mlx72 </option>
<option value="114">AE0 14 : Johnson's Baby Lotion (A/V)(N) -
400mlx72 </option>
<option value="115">AE0 15 : Johnson's Baby Lotion (A/V)(N) -
800mlx72 </option>
</select>
</span> </td>
</tr>
<tr>
<td nowrap>Without Span </td>
<td>
<select name="select" style="overflow :hidden;width:1 50px" border=0
onchange="setLa belNoSpan(this) ">
<option value="">Select Product Code</option>
<option value="100">AE0 00 : Johnson's Baby Lotion (A/V)(G) -
100mlx24 </option>
<option value="101">AE0 01 : Johnson's Baby Lotion (A/V)(G) -
200mlx24 </option>
<option value="102">AE0 02 : Johnson's Baby Lotion (A/V)(G) -
400mlx24 </option>
<option value="103">AE0 03 : Johnson's Baby Lotion (A/V)(G) -
800mlx24 </option>
<option value="104">AE0 04 : Johnson's Baby Lotion (A/V)(G) -
100mlx72 </option>
<option value="105">AE0 05 : Johnson's Baby Lotion (A/V)(G) -
200mlx72 </option>
<option value="106">AE0 06 : Johnson's Baby Lotion (A/V)(G) -
400mlx72 </option>
<option value="107">AE0 07 : Johnson's Baby Lotion (A/V)(G) -
800mlx72 </option>
<option value="108">AE0 08 : Johnson's Baby Lotion (A/V)(N) -
100mlx24 </option>
<option value="109">AE0 09 : Johnson's Baby Lotion (A/V)(N) -
200mlx24 </option>
<option value="110">AE0 10 : Johnson's Baby Lotion (A/V)(N) -
400mlx24 </option>
<option value="111">AE0 11 : Johnson's Baby Lotion (A/V)(N) -
800mlx24 </option>
<option value="112">AE0 12 : Johnson's Baby Lotion (A/V)(N) -
100mlx72 </option>
<option value="113">AE0 13 : Johnson's Baby Lotion (A/V)(N) -
200mlx72 </option>
<option value="114">AE0 14 : Johnson's Baby Lotion (A/V)(N) -
400mlx72 </option>
<option value="115">AE0 15 : Johnson's Baby Lotion (A/V)(N) -
800mlx72 </option>
</select>
</td>
</tr>
</table>
<br> Selected Value using span = <span id="labelSpan"> </span>
<br> Selected Value without span = <span id="labelNoSpan "></span>
</form>
</body>
</html>
<!-- end sample code -->
The row 'without span' in the table is what the original looks like, and
row 'using span' is after using the span.
I hope this one idea can help another people too.
thanks,
hiroshi
*** Sent via Developersdex
http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!
