如何对select元素中的选项进行逻辑分组

    技术2022-05-11  93

    不知道大家有没有这样的感觉,在select选项足够多的时候,被select中的选项弄得头昏眼花,想要找一个自己想要的选项实在是太困难了。

    其实是可以对select里面的选项进行逻辑分组的。

    可以想象得到,如果对select的选项进行了分组,这对于有大量选项的select肯定是有好处的。至少用户体验会好很多,方便大家,何乐而不为呢?

    [演示地址:http://www.doyoe.com/model/dhtml/example/optgroup.htm

    XHTML:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta name="Author" content="飘零雾雨|edzmaster@gmail.com" /><title>请给select选项分分组吧</title></head><body><div><h1>用optgroup给select选项分组:</h1><select><optgroup label="电脑"><option>Ibm</option><option>Dell</option><option>Lenovo</option></optgroup><optgroup label="手机"><option>MOTO</option><option>NOKIA</option><option>SAMAUNG</option></optgroup></select></div></body></html>

    上面是一个给select选项进行分组的例子,当然,这个例子的选项比较少,所以还看不出分组有什么好处或优势。

    给select 选项分组主要是用在:

    1、有明显的类别区分2、选项实在太多

    需要注意的是:所有的optgroup元素必须在select元素中直接指定,且组不允许嵌套。

     

    最新回复(0)