CODEWITHSUNDEEP
jqueryhtmldrop-down-menu
tony noriega
tony noriega

Reputation: 7673

Display dropdown list with options in multiple columns

Is there a way to display an HTML dropdown list with options in multiple columns?

I do not want multiple columns with one row of data, I want 3 rows of selectable options.

Is this possible via either .NET or jQuery?

Upvotes: 1

Views: 4654

Answers (4)

Havok
Havok

Reputation: 5882

HTML select tag cannot do that, but you can use html lists+javascript+css like so:

<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
     <title>Language select widget with multiple columns</title>
     <style type="text/css">
div#lang_columns_main {
  position: relative;
}
a#lang_columns_selector {
}
div#lang_columns_dialog {
  background-color: white;
  border: 1px solid black;
  display: none;
  position: absolute;
}
ul.lang_columns_column {
  float: left;
  margin: 0;
  overflow: hidden;
  padding: 0;
}
ul.lang_columns_column li {
  list-style: none;
  padding: 1px;
}
ul.lang_columns_column li a {
}
     </style>
     <script language="javascript" type="text/javascript">
function lang_columns_toggle() {

  var dialog = document.getElementById("lang_columns_dialog");

  if(dialog.style.display == "block") {
    dialog.style.display = "none";
  } else {
    dialog.style.display = "block";
  }
} 
    </script>
  </head>
  <body>
    <div id="lang_columns_main">
      <a href="javascript:lang_columns_toggle();" id="lang_columns_selector">English</a>
      <div id="lang_columns_dialog">
        <ul class="lang_columns_column">
          <li><a href="#">Afrikaans</a></li>
          <li><a href="#">Amharic</a></li>
          <li><a href="#">Arabic</a></li>
          <li><a href="#">Armenian</a></li>
          <li><a href="#">Azerbaijani</a></li>
          <li><a href="#">Basque</a></li>
          <li><a href="#">Belarusian</a></li>
          <li><a href="#">Bengali</a></li>
          <li><a href="#">Bulgarian</a></li>
          <li><a href="#">Catalan</a></li>
          <li><a href="#">Chichewa</a></li>
          <li><a href="#">Coptic</a></li>
          <li><a href="#">Croatian</a></li>
          <li><a href="#">Czech</a></li>
          <li><a href="#">Danish</a></li>
          <li><a href="#">Dutch</a></li>
          <li><a href="#">English</a></li>
          <li><a href="#">Esperanto</a></li>
          <li><a href="#">Estonian</a></li>
          <li><a href="#">Faroese</a></li>
          <li><a href="#">Persian</a></li>
          <li><a href="#">Fijian</a></li>
          <li><a href="#">Finnish</a></li>
          <li><a href="#">French</a></li>
          <li><a href="#">Frisian</a></li>
        </ul>
        <ul class="lang_columns_column">
          <li><a href="#">Friulian</a></li>
          <li><a href="#">Galician</a></li>
          <li><a href="#">Gascon</a></li>
          <li><a href="#">German</a></li>
          <li><a href="#">Greek</a></li>
          <li><a href="#">Gujarati</a></li>
          <li><a href="#">Hawaiian</a></li>
          <li><a href="#">Hebrew</a></li>
          <li><a href="#">Hindi</a></li>
          <li><a href="#">Hungarian</a></li>
          <li><a href="#">Icelandic</a></li>
          <li><a href="#">Indonesian</a></li>
          <li><a href="#">Interlingua</a></li>
          <li><a href="#">Irish</a></li>
          <li><a href="#">Italian</a></li>
          <li><a href="#">Kashubian</a></li>
          <li><a href="#">Khmer</a></li>
          <li><a href="#">Kinyarwanda</a></li>
          <li><a href="#">Kiswahili</a></li>
          <li><a href="#">Korean</a></li>
          <li><a href="#">Kurdish</a></li>
          <li><a href="#">Latin</a></li>
          <li><a href="#">Latvian</a></li>
          <li><a href="#">Lingala</a></li>
          <li><a href="#">Lithuanian</a></li>
        </ul>
        <ul class="lang_columns_column">
          <li><a href="#">Luxembourgish</a></li>
          <li><a href="#">Malagasy</a></li>
          <li><a href="#">Malay</a></li>
          <li><a href="#">Māori</a></li>
          <li><a href="#">Macedonian</a></li>
          <li><a href="#">Marathi</a></li>
          <li><a href="#">Malayalam</a></li>
          <li><a href="#">Mongolian</a></li>
          <li><a href="#">Ndebele</a></li>
          <li><a href="#">Nepali</a></li>
          <li><a href="#">Northern Sotho</a></li>
          <li><a href="#">Norwegian</a></li>
          <li><a href="#">Occitan</a></li>
          <li><a href="#">Oriya</a></li>
          <li><a href="#">Papiamentu</a></li>
          <li><a href="#">Persian</a></li>
          <li><a href="#">Polish</a></li>
          <li><a href="#">Portuguese</a></li>
          <li><a href="#">Punjabi</a></li>
          <li><a href="#">Quechua</a></li>
          <li><a href="#">Quichua</a></li>
          <li><a href="#">Romanian</a></li>
          <li><a href="#">Русский</a></li>
          <li><a href="#">Sami</a></li>
          <li><a href="#">Scottish Gaelic</a></li>
        </ul>
        <ul class="lang_columns_column">
          <li><a href="#">Serbian</a></li>
          <li><a href="#">Setswana</a></li>
          <li><a href="#">Sinhala</a></li>
          <li><a href="#">Slovak</a></li>
          <li><a href="#">Slovenian</a></li>
          <li><a href="#">Southern Sotho</a></li>
          <li><a href="#">Spanish</a></li>
          <li><a href="#">Swazi/Swati</a></li>
          <li><a href="#">Swedish</a></li>
          <li><a href="#">Tagalog</a></li>
          <li><a href="#">Tamil</a></li>
          <li><a href="#">Tetum</a></li>
          <li><a href="#">Thai</a></li>
          <li><a href="#">Tsonga</a></li>
          <li><a href="#">Ukrainian</a></li>
          <li><a href="#">Urdu</a></li>
          <li><a href="#">Uzbek</a></li>
          <li><a href="#">Venda</a></li>
          <li><a href="#">Vietnamese</a></li>
          <li><a href="#">Wayunaiki</a></li>
          <li><a href="#">Welsh</a></li>
          <li><a href="#">Xhosa</a></li>
          <li><a href="#">Yiddish</a></li>
          <li><a href="#">Zulu</a></li>
        </ul>
      </div>
    </div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi a eleifend est. Sed eleifend, nulla a commodo lobortis, neque erat tincidunt neque, in ultrices mauris purus ac orci. Donec venenatis augue non nisi ornare malesuada. Praesent convallis nibh eget diam luctus a varius libero sagittis. Etiam eros lectus, tristique ultrices commodo id, pulvinar in leo. Praesent non mauris accumsan ligula convallis imperdiet a eu tellus. In tincidunt molestie tempor. Duis consectetur hendrerit orci, sed facilisis ante tempus vitae. Nulla neque metus, auctor vel tempus eu, congue eu nisl. Nam convallis pulvinar pulvinar. Integer pulvinar ligula porta erat dignissim pharetra. Fusce vestibulum sollicitudin velit convallis tincidunt. Donec imperdiet vulputate mauris, in egestas sapien tincidunt nec. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis viverra urna vitae leo gravida condimentum. Phasellus aliquam neque sed ligula dapibus venenatis.</p>
  </body>
</html>

Upvotes: 1

kniemczak
kniemczak

Reputation: 359

I do not know of a way to do this with just HTML, but you could create a custom control in .NET to handle this perhaps by extending the select list class in .NET and rendering it as you need.

Upvotes: 0

Liam Spencer
Liam Spencer

Reputation: 936

As far as your question goes, it isn't possible, kind of defeats the purpose in having a select element in the first place! Just use checkboxes or radio buttons.

Upvotes: 0

eykanal
eykanal

Reputation: 27077

There's no way to do this with plain vanilla form fields. You'd have to essentially create your own form input type using javascript or whatever.

Upvotes: 3

Related Questions