Horizontal selection

[b]code[/b]

<select name="select">
<table>
 <tr>
   <td><option value="1">1</option></td>
   <td><option value="2">2</option></td>
 </tr>
 <tr>
   <td><option value="3">3</option></td>
   <td><option value="4">4</option></td>
 </tr>
</table>
</select> 

The code above is one of trials for horizontal selection.
But it seems not to work.

Since I have many options in a selection, I like to make the selection
horizontally and vertiacally selectable.

How can I get it?

you can’t use a table within a <select>

I’m not sure what you mean by horizontally and vertically selectable :confused2:

do you mean you want the options displayed in a tabular format?

if so, then using <a>'s, radio buttons or checkboxes might be a better option.

Yes.

Sounds like you want to be using radio buttons. It’s for a form I’m guessing…?

Here is a slightly offbeat way to do it. I have used P elements within a div, all floating left. The value for each element is stored as a property of the P elements. The onclick handler is applied dynamically on page load.

When the page loads, clicking on any box will trigger an alert with the box value in it. You can adapt this approach to your own needs.

[HIGHLIGHT=“”]
<!doctype HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>

<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=windows-1252”>
<title>Horizontal Ps</title>
<style type=“text/css”>
<!–
body { font-family:Arial, sans-serif; font-size:13px; font-weight:normal; color:#000; }
#block1 { position:absolute; top:100px; left:100px; }
#block1 p { margin:5px; float:left; cursor:pointer; border:1px solid #000; padding:2px; }
–>
</style>
<script type=“text/javascript”>
<!–
function init()
{ // get collection of target P elements
var allPs=document.getElementById(“block1”).getElementsByTagName(“p”);
var i;
for(i=0;i<allPs.length;i++)
{// put value as property of each P element
allPs[i].valNumber=i+1;
// add onclick handler to each P element
allPs[i].onclick=getValue;
}
}
// -----------
// onclick handler
var getValue=function(){ alert(this.valNumber);}
//
//–>
</script>
</head>

<body onload=“init()”>

<div id=“block1”>
<p class=“a”>aaaaa</p>
<p>bbbbbbbbbb</p>
<p>ccccccccccccccc</p>
<p>dddddddddddddd</div>
<!-- end block1 –>

</body>

</html>

If you have enough items in your select you feel the need for that – then frankly you have too many items in your select to be using that tag in the first place!

Time to look at radio-buttons, or break out the selection into multiple pages, or hide them with .js until the user wants them, making sure that when javascript is disabled the full page of selections shows.

But I’m the guy who gets pissed at 90% of the crap people put into selects in the first place… It’s like “Lands sake just let me type in the blasted choice!” – see all those websites with the ‘select your birthdate’ nonsense. I don’t even bother trying to enter the correct date anymore since the year column is almost ALWAYS broken so you can’t see the last digit.

see all those websites with the ‘select your birthdate’ nonsense. I don’t even bother trying to enter the correct date anymore since the year column is almost ALWAYS broken so you can’t see the last digit.

Wouldn’t this be because those websites do

  • {
    margin: 0;
    padding: 0;
    }
    and you use Opera?

Our sites also do everything with selects but that’s not my choice, it’s the backender’s : (

Selects have been shown to be less usable than input fields and radio buttons, so if you have the freedom to avoid them except in the instances where they really are useful, do so.