JBTALKS.CC

标题: <select><option> padding/spacing 问题 [打印本页]

作者: ~Zero 时间: 2010-9-6 10:06 AM
标题: <select><option> padding/spacing 问题

我要的效果是这样.

我试过:

<select>
<option style="padding-left: 0px;">Option Level 1</option>
<option style="padding-left: 5px;">Option Level 2</option>
<option style="padding-left: 10px;">Option Level 3</option>
</select>

复制代码

这个的效果在 firefox 可行, 可是 IE, chrome, opera 都不行.

我试过:

<select>
<option>Option Level 1</option>
<option>   Option Level 2</option>
<option>     Option Level 3</option>

复制代码

这样的话, 在 selected 的时候也会有 space.

看起来最理想的我试过是:

<select>
<opgroup label="Option Level 1">
<opgroup label="Option Level 2">
<option>Option Level 3</option>
</optgroup>
</optgroup>
</select>

复制代码

可是, 我要的效果是, Level 1 和 2 都可以选的.

怎么办? 有什么简单的好方法?
(另外 code 一个 javascript 好像太小题大作了.)

作者: Super-Tomato 时间: 2010-9-6 02:29 PM
本帖最后由 Super-Tomato 于 2010-9-6 03:36 PM 编辑

我要的效果是这样.

我试过:这个的效果在 firefox 可行, 可是 IE, chrome, opera 都不行.

我试过:这 ...
~Zero 发表于 2010-9-6 10:06 AM

简单的話使用＆#160; 代替空格

p/s: 如果要多样化我想還是須配合 css 与 javascript

作者: pshlim 时间: 2010-9-29 10:46 PM
"
我试过: <select>
<option>Option Level 1</option>
<option> nbsp; Option Level 2</option>
<option> nbsp;   Option Level 3</option>
复制代码这样的话, 在 selected 的时候也会有 space.
"

那就在option 里加value 咯。。。

作者: ~Zero 时间: 2010-9-29 11:42 PM
不是 value 问题, 是如果加 space 的话, 那比如说第二个 option 有两个 space,
在 drop down 里面选择第二个 option 的时候, 在 menu 里面也会有两个 space, 很不美观.

作者: Super-Tomato 时间: 2010-9-30 12:14 AM

不是 value 问题, 是如果加 space 的话, 那比如说第二个 option 有两个 space,
在 drop down 里面选择第二 ...
~Zero 发表于 2010-9-29 11:42 PM

自己去掉不必要的空格就好了啊，演示

作者: 宅男-兜着走 时间: 2010-9-30 01:31 AM

自己去掉不必要的空格就好了啊，
Super-Tomato 发表于 2010-9-30 12:14 AM

document.getElementById("selector").innerHTML = "Select : " + str.replace(/(^\s*)|(\s*$)/g, "");

复制代码

感谢，但是这句看不懂。 str.replace(/(^\s*)|(\s*$)/g, "");

作者: Super-Tomato 时间: 2010-9-30 01:35 AM

感谢，但是这句看不懂。 str.replace(/(^\s*)|(\s*$)/g, "");
宅男-兜着走发表于 2010-9-30 01:31 AM

使用 regular expression 把開始或结尾的空格替换

作者: ~Zero 时间: 2010-9-30 04:54 PM

作者: Super-Tomato 时间: 2010-9-30 09:05 PM

~Zero 发表于 2010-9-30 04:54 PM

自己變通一下就可以達到你所要的效果了啊演示

作者: ~Zero 时间: 2010-10-1 10:55 AM
回复 9# Super-Tomato
瓦～很好，这就是我要的！！！
谢谢你～每次在论坛帮到最多的就是你了呵呵，超级感激的。
^^

作者: 宅男-兜着走 时间: 2010-10-1 12:59 PM
回复 9# Super-Tomato

我发现到一点问题。
如果当前select 着 Level 2 的话， Lever 2 的Spacing 就不见了。

作者: ~Zero 时间: 2010-10-1 01:59 PM
eh... 对咯

作者: Super-Tomato 时间: 2010-10-1 02:11 PM

回复 Super-Tomato

我发现到一点问题。
如果当前select 着 Level 2 的话， Lever 2 的Spac ...
宅男-兜着走发表于 2010-10-1 12:59 PM

這是必然的，selector 是顯示你所選擇的 row，而要完全做到 menulist 不變是不行的，再加上 select 標簽没有 show menulist 的 event，所以這自然是最简易的方法。要求高的話就必須自己使用 select 標簽舆 div 结合做出效果，懒惰的話就自己到网上看看有没有人寫好這样的 plugin 套用吧

作者: 宅男-兜着走 时间: 2010-10-1 02:48 PM

這是必然的，selector 是顯示你所選擇的 row，而要完全做到 menulist 不變是不行的，再加上 select 標 ...
Super-Tomato 发表于 2010-10-1 02:11 PM

我会选择找现成的

http://jquery.sanchezsalvador.com/samples/example.htm

不过我觉得并无大碍。
东西是没十全十美的。
正所谓，完美，不完美

作者: ~Zero 时间: 2010-10-1 03:33 PM
这个 jquery example 其实就跟 html 的 optgroup 一样，
它的标题 (paper types, chair types) 是不能被选择的。

作者: 宅男-兜着走 时间: 2010-10-1 05:29 PM

这个 jquery example 其实就跟 html 的 optgroup 一样，
它的标题 (paper types, chair types) 是不能被选 ...
~Zero 发表于 2010-10-1 03:33 PM

如果 2 个 Level 的话比较简单==
这个不行吗 ==？

<select id="selectGroup">
<option>OPT Level1</option>
<optgroup>
<option>OPT Level2</option>
</optgroup>
</select>

复制代码

可是为什么要那么多空行的 == 。。。

作者: ~Zero 时间: 2010-10-1 09:51 PM
这样会空很多行。。。

作者: 宅男-兜着走 时间: 2010-10-1 10:28 PM
回复 17# ~Zero

麻烦死 ==

作者: ~Zero 时间: 2010-10-2 11:08 AM
对咯，虽然看起来不是很难的东西，可是在 html/css 就是做不到。
这就是 html 其中一个限制吧。

其实 padding 是可行的，可是在众多 browser 中只有 firefox 支持 option 里面 padding。。。
所以是语言技术的问题，还是 browser 的问题？

作者: 宅男-兜着走 时间: 2010-10-2 12:35 PM

对咯，虽然看起来不是很难的东西，可是在 html/css 就是做不到。
这就是 html 其中一个限制吧。

其实 p ...
~Zero 发表于 2010-10-2 11:08 AM

这就是为什么人家说做 web app 还难过做 desktop app，要考虑 browser的兼容性。单单这点就会让人头痛。
而且 CSS 的话，也有分 Browser支持不支持的。

随着 Chrome 的出现，我们的负担又变大。

欢迎光临 JBTALKS.CC (https://jbtalks.my/)