当前位置： 文江博客话题详情

显示包含多列选项的下拉列表

发布于 2024-09-11 19:15:34 字数 99 浏览 5 评论 0原文

有没有办法显示包含多列选项的 HTML 下拉列表？

我不想要多列包含一行数据，我想要 3 行可选选项。

这可以通过 .NET 或 jQuery 实现吗？

原文

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?

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（4）

撩人痒 2024-09-18 19:15:40

我不知道仅使用 HTML 来完成此操作的方法，但您可以在 .NET 中创建自定义控件来处理此问题，也许可以通过扩展 .NET 中的选择列表类并根据需要呈现它。

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.

回复 原文
瀞厅☆埖开 2024-09-18 19:15:39

就您的问题而言，这是不可能的，这有点违背了首先选择元素的目的！只需使用复选框或单选按钮。

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.

回复 原文
千笙结 2024-09-18 19:15:38

HTML select 标签无法做到这一点，但您可以使用 htmllists+javascript+css，如下所示：

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

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>
回复 原文
独木成林 2024-09-18 19:15:37

没有办法用普通的表单字段来做到这一点。您必须使用 javascript 或其他方式创建自己的表单输入类型。

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.

回复 原文
~没有更多了~

关于作者

北陌

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

淡笑忘祈一世凡恋

文章 0 评论 0

我们的影子

文章 0 评论 0

素年丶

文章 0 评论 0

南笙

文章 0 评论 0

18215568913

文章 0 评论 0

qq_xk7Ean

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文