473,406 Members | 2,345 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,406 software developers and data experts.

ALT function on <SELECT> option

Hi!, I want to fix via javascript the combo width to a fix value. I'd
like to implement a kind of ALT / TITLE function to show the entire
option when the text is longer than the combo width...
It's possible?!?
Thanks
Jul 23 '05 #1
3 16382


gekoblu wrote:
Hi!, I want to fix via javascript the combo width to a fix value. I'd
like to implement a kind of ALT / TITLE function to show the entire
option when the text is longer than the combo width...
It's possible?!?


You can set the width with CSS, you can set the title attribute as a
property with javascript:

<html lang="en">
<head>
<title>setting title of select element</title>
<script type="text/javascript">
function setTitleToSelectedText (select) {
if (select.selectedIndex > -1) {
select.title = select.options[select.selectedIndex].text;
}
}
</script>
<style type="text/css">
select {
width: 100px;
}
</style>
</head>
<body>
<form name="formName" action="">
<p>
<select name="select1" onchange="setTitleToSelectedText(this);">
<option>option 1 option 1 option 1</option>
<option>option 2 option 2 option 2</option>
<option>option 3 option 3 option 3</option>
</select>
</p>
<p>
<select name="select2" onchange="setTitleToSelectedText(this);" size="3">
<option>option 1 option 1 option 1</option>
<option>option 2 option 2 option 2</option>
<option>option 3 option 3 option 3</option>
</select>
</p>
</form>
<script type="text/javascript">
setTitleToSelectedText(document.forms.formName.ele ments.select1);
setTitleToSelectedText(document.forms.formName.ele ments.select2);
</script>
</body>
</html>

Note however that IE/Win doesn't support this (title attribute/property
of <select> elements), but Mozilla, Netscape 6/7, Opera 7 do
--

Martin Honnen
http://JavaScript.FAQTs.com/

Jul 23 '05 #2
Thanks Martin, unfortunately I had to use IE 6...
another problem is: if I fix the combo width, also the drop down menu
is resized and if the option is longer, it will be cutted!
I'd like a 'title' for each option even in the drop down, even befor a
select action... Do you think I'm wondering the moon?!? :-)
Martin Honnen <ma*******@yahoo.de> wrote in message news:<40********@olaf.komtel.net>...
gekoblu wrote:
Hi!, I want to fix via javascript the combo width to a fix value. I'd
like to implement a kind of ALT / TITLE function to show the entire
option when the text is longer than the combo width...
It's possible?!?


You can set the width with CSS, you can set the title attribute as a
property with javascript:

<html lang="en">
<head>
<title>setting title of select element</title>
<script type="text/javascript">
function setTitleToSelectedText (select) {
if (select.selectedIndex > -1) {
select.title = select.options[select.selectedIndex].text;
}
}
</script>
<style type="text/css">
select {
width: 100px;
}
</style>
</head>
<body>
<form name="formName" action="">
<p>
<select name="select1" onchange="setTitleToSelectedText(this);">
<option>option 1 option 1 option 1</option>
<option>option 2 option 2 option 2</option>
<option>option 3 option 3 option 3</option>
</select>
</p>
<p>
<select name="select2" onchange="setTitleToSelectedText(this);" size="3">
<option>option 1 option 1 option 1</option>
<option>option 2 option 2 option 2</option>
<option>option 3 option 3 option 3</option>
</select>
</p>
</form>
<script type="text/javascript">
setTitleToSelectedText(document.forms.formName.ele ments.select1);
setTitleToSelectedText(document.forms.formName.ele ments.select2);
</script>
</body>
</html>

Note however that IE/Win doesn't support this (title attribute/property
of <select> elements), but Mozilla, Netscape 6/7, Opera 7 do

Jul 23 '05 #3
In IE 6, one way that you have to display the complete option
is to put (via javascript) a title on the word that you have sitting
next to the SELECT element saying what it is (like Choices:). Then
IF the user thinks to put hir mouse over that word, he could find out
what the complete option is. However, this still won't do what you're
asking for (where there is a title as you hilight a choice before
selection).

Csaba Gabor

"gekoblu" <ge*****@tiscali.it> wrote in message
news:47**************************@posting.google.c om...
Thanks Martin, unfortunately I had to use IE 6...
another problem is: if I fix the combo width, also the drop down menu
is resized and if the option is longer, it will be cutted!
I'd like a 'title' for each option even in the drop down, even befor a
select action... Do you think I'm wondering the moon?!? :-)
Martin Honnen <ma*******@yahoo.de> wrote in message

news:<40********@olaf.komtel.net>...
gekoblu wrote:
Hi!, I want to fix via javascript the combo width to a fix value. I'd
like to implement a kind of ALT / TITLE function to show the entire
option when the text is longer than the combo width...
It's possible?!?


You can set the width with CSS, you can set the title attribute as a
property with javascript:

<html lang="en">
<head>
<title>setting title of select element</title>
<script type="text/javascript">
function setTitleToSelectedText (select) {
if (select.selectedIndex > -1) {
select.title = select.options[select.selectedIndex].text;
}
}
</script>
<style type="text/css">
select {
width: 100px;
}
</style>
</head>
<body>
<form name="formName" action="">
<p>
<select name="select1" onchange="setTitleToSelectedText(this);">
<option>option 1 option 1 option 1</option>
<option>option 2 option 2 option 2</option>
<option>option 3 option 3 option 3</option>
</select>
</p>
<p>
<select name="select2" onchange="setTitleToSelectedText(this);" size="3"> <option>option 1 option 1 option 1</option>
<option>option 2 option 2 option 2</option>
<option>option 3 option 3 option 3</option>
</select>
</p>
</form>
<script type="text/javascript">
setTitleToSelectedText(document.forms.formName.ele ments.select1);
setTitleToSelectedText(document.forms.formName.ele ments.select2);
</script>
</body>
</html>

Note however that IE/Win doesn't support this (title attribute/property
of <select> elements), but Mozilla, Netscape 6/7, Opera 7 do

Jul 23 '05 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

6
by: Omar | last post by:
Hi, In a JSP I have the next: .... codigo = "<select name='" + nombre + "'>\n<option selected value='default'>Escoge</option><option value='todos'>Todos</option>"; if (miRS != null) while...
6
by: Bonge Boo! | last post by:
This has got to be obvious, but I can't make it work. I have a form called with 3 pull down menus. They are linked to a database which generates the values for the <SELECT? Pull-downs. Lets...
6
by: Chris Fink | last post by:
Does anyone know it is possible to include a small image(.gif .jpeg) within a <SELECT><option> so that the user would see the option text as well as a little image(icon) in the option? I know this...
3
by: i_dvlp | last post by:
I'm trying to replicate a fancy drop-down control (MS-egads!) with form <select><option> It doesn't look like you can specity width as an attribute or define width with CSS. It looks like my...
3
by: veg_all | last post by:
Say I have: <select> <option value='a' > First <option value='b' > Second <option value='c' > Third </select> Is there a way I can access the values First, Second and Third from an array ?...
5
by: = poster = | last post by:
Hi all , I have a script which let the user choose between four days : Day: <select name=\"day\" value=\"$day\"> <option value=\"01\">1</option> <option value=\"02\">2</option> <option...
2
by: KarlosSultana | last post by:
Hello to those who read this, this is my first ever post! I am currently getting very confused trying to put a <form> in a table-cell: Firstly I have a <div> styled with display:table -this...
4
by: Man-wai Chang | last post by:
-- iTech Consulting Co., Ltd. Expert of ePOS solutions Website: http://www.itech.com.hk (IE only) Tel: (852)2325 3883 Fax: (852)2325 8288
1
by: volynetsv | last post by:
Hello. I have a small problem, here's code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.