看见有人实现这样一种效果不知道是什么方法，请教大家

我经常看到一些网站的select的下拉列表当中，例如有以下option
<select>
<option>水果</option>
<option>    苹果</option>
<option>食物</option>
<option>   馒头</option>
</select>      水果
          苹果
      食物
          馒头
让用户可以自由的选择二级选项，例如，不能让用户选中水果和香蕉两个option.
不知道如何实现大家请指教

解决方案 »

  1.   

    不能让用户选中水果和香蕉两个option??
      

  2.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <script   language="javascript">
    function change(){
     var obj=document.getElementById("select1");
     var index=obj.selectedIndex;
     var text=obj.options[index].getAttribute("xx");
    if(text==="no"){
    alert("大过年的别选我行不行?");
    }
     }
     
      </script>
    </head>
    <body>
    <select  id="select1" onchange="change()">
    <option xx="yes">水果</option>
    <option xx="no">    苹果</option>
    <option xx="yes">食物</option>
    <option xx="no">   馒头</option>
    </select></body>
    </html>
      

  3.   

    <select>
    <optgroup label="水果">
    <option>葡萄</option>
    <option>香蕉</option>
    <option>苹果</option>
    </optgroup>
    <optgroup label="蔬菜">
    <option>西红柿</option>
    <option>土豆</option>
    <option>白菜</option>
    </optgroup>
    </select>
    本来就有分组的标签。