SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    horizontal selection

    Code:
    code
    
    <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?

  2. #2
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you can't use a table within a <select>

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

    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.

  3. #3
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kalon View Post
    do you mean you want the options displayed in a tabular format?
    Yes.

  4. #4
    SitePoint Zealot FaridHadi's Avatar
    Join Date
    Nov 2008
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sounds like you want to be using radio buttons. It's for a form I'm guessing..?

  5. #5
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code :
    <!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>

  6. #6
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #7
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •