Question

我现在在代码中拥有的内容：

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

看起来很糟糕，经过几十次参赛后，非常非常难以阅读。

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

问题：在我开始自己编写之前，有人已经完成了这个（在任何库中）吗？我已经浏览了jquery插件注册表，并且有很多插件可以将<ul>转换为像<select>这样的行为来创建花哨的多选。（其中一些甚至可以工作，如果你可以禁用多部分.SE的自己的标签输入在它的＆＃34;下拉＆＃34;中有相当奇特的格式。）但是如果那里有一个可以将<table>（或其他任何内容）变成带选择的列，它会在噪音中丢失。

注意：我发现了一些related posts建议使用等宽字体和填充以简单的选择标记排列数据，但我想要考虑一下它可以做得更好，特别是在看到像Chosen这样的jquery插件之后。

Answer 1

我无法找到任何可以将表格转换为带有列的下拉列表的内容，但我可以使用SelectBoxIt的data-text属性来伪造它{ {1}}：

inline-block

<select> <option value="1" data-search="555-555-5555 Bob" data-text="<span style="display:inline-block; min-width:10em; margin-right:1em;">555-555-5555</span><span style="display:inline-block;">Bob</span>"></option> <option value="2" data-search="444-444-4444 Steve" data-text="<span style="display:inline-block; min-width:10em; margin-right:1em;">444-444-4444</span><span style="display:inline-block;">Steve</span>"></option> </select>是必需的，以使类型到搜索工作（否则，它似乎希望用户键入data-search中显示的HTML）。如果有人确实输入了一个电话号码，如0118-999-881-99-9119-7253，那么需要做更多工作才能使这些列排成一行。

将HTML表转换为下拉列表（或以其他方式获取带列的select标记）

1 个答案: