jquery - 可以在表单下拉列表中创建列吗？

Question

有人知道在表单下拉列表中创建对齐列的解决方案吗？

也许用 css

跨浏览器会很方便......例如

<select size="1">
<option> John Smith      | 24 | United States</option>
<option> Johnny Vegas    | 34 | United Kingdom</option>
<option> Andrew Townsend | 34 | Canada</option>
</select>

垂直条只是列对齐的表示..

希望这是有道理的

Answer 1

它不能用 css 完成，你可以添加空格来缩进它，就像你对问题所做的那样。

<select size="1">
    <option> John Smith &thinsp; &thinsp; &thinsp; &thinsp;&thinsp;&thinsp;&thinsp;&thinsp;  | 24 | United States</option>
    <option> Johnny Vegas&thinsp;&thinsp;&thinsp;&thinsp;&thinsp;&thinsp;&thinsp; &thinsp;| 34 | United Kingdom</option>
    <option> Andrew Townsend | 34 | Canada</option>
</select>​​​​​​​​​​​​​

现场演示

Answer 2

解决此问题的最佳方法是，如果您对以库的形式向页面加载添加额外请求持谨慎态度，则使用 CSS 创建一个 ul-li 可见的自定义下拉菜单并将点击事件附加到每个 li 到操纵隐藏的选择。使用 CSS 和 jQuery / javascript 很容易做到（我更喜欢 jQuery 只是因为它打字少而且我已经习惯了）。

Answer 3

gdoron 让我思考，所以我写了一个快速的 PHP hack 给那些后来发现这个线程的人

$name = str_replace("_", " ", str_pad($name , 50 ,"_"));

我确定在 php 中还有其他方法可以做到这一点。

很确定这可以跨浏览器进行测试！

确保你的风格

select style="font-family: monospace;"