将 HTML 表转换为下拉列表(或以其他方式获取带有列的选择标记）

Convert HTML table to dropdown (or otherwise getting a select tag with columns)

本文关键字：获取 选择 方式 其他 转换 HTML 下拉列表      更新时间：2023-09-26

我现在的代码中有什么：

<select>
   <option value="...">Dr. Steve 555-222-9393</option>
   <option value="...">Jim 333-999-1111</option>
   <option value="...">New Emergency Services 0118-999-881-99-9119-7253</option>
</select>
它

看起来很糟糕，在几十个条目之后，它非常非常难以阅读。

我想要的是通过使用表格来模拟下拉列表，然后一次只显示表格的一行(当前所选行的值存储在隐藏的输入中(。

问题：在我开始自己编写之前，是否有人已经这样做了(在任何库中(？ 我一直在浏览 jquery 插件注册表，有很多插件可以将<ul>转换为像 <select> 和吨一样的行为，以创建花哨的多选。(如果您可以禁用多部分，其中一些甚至可能有效。 SE 自己的标签输入在其"下拉菜单"中具有非常花哨的格式。但是，如果有一个可以将<table>(或其他任何东西(变成带有列的选择，它就会消失在噪音中。

注意：我发现许多相关帖子建议使用等宽字体和填充将数据排列在普通选择标签中，但我认为它可以做得更好，尤其是在看到像 Chosen 这样的 jquery 插件之后。

我找不到任何可以将表格转换为带有列的下拉列表的东西，但我能够使用 SelectBox它的data-text属性来伪造它inline-block：

<select>
<option value="1" data-search="555-555-5555 Bob" data-text="<span style=&quot;display:inline-block; min-width:10em; margin-right:1em;&quot;>555-555-5555</span><span style=&quot;display:inline-block;&quot;>Bob</span>"></option>
<option value="2" data-search="444-444-4444 Steve" data-text="<span style=&quot;display:inline-block; min-width:10em; margin-right:1em;&quot;>444-444-4444</span><span style=&quot;display:inline-block;&quot;>Steve</span>"></option>
</select>
data-search 是必需的，以便

键入搜索工作(否则，它似乎希望用户键入 HTML 如 data-text 所示(。如果有人真的输入了 0118-999-881-99-9119-7253 等电话号码，则需要做更多的工作来使列对齐。

相关文章：