列表框的问题？？？ ？？？

可以啊，你onchange判断一下就可以了，但问题是你开始的时候默认就已经是选上“大分类a”了，你怎么处理？

解决方案 »

  1.   

    使用 HTML 标签 optgroup 即可！
    L@_@K
      <select name="select" id="select"> 
      <optgroup LABEL="大分类a">
      <option value="1">小分类1 </option> 
      <option value="2">小分类2 </option> 
      <option value="3">小分类3 </option> 
      <option value="4">小分类4 </option> 
      <option value="5">小分类5 </option> 
      </optgroup>
      <optgroup LABEL="大分类b">
      <option value="6">小分类6 </option> 
      <option value="7">小分类7 </option> 
      <option value="8">小分类8 </option> 
      <option value="9">小分类9 </option> 
      <option value="10">小分类10 </option> 
        </optgroup>
      </select>
      

  2.   

    建议，拆分成2个select,选中大类后后面的小类select动态添加，
      

  3.   

    http://www.cnblogs.com/Qizai/archive/2007/08/07/846857.html
      

  4.   

    改良一下，加个提示项，value 为空字符串。
    L@_@K
      <select name="selCategory" id="selCategory"> 
      <option value=""><-- 请选择分类 --></option> 
      <optgroup LABEL="大分类a">
      <option value="1">小分类1 </option> 
      <option value="2">小分类2 </option> 
      <option value="3">小分类3 </option> 
      <option value="4">小分类4 </option> 
      <option value="5">小分类5 </option> 
      </optgroup>
      <optgroup LABEL="大分类b">
      <option value="6">小分类6 </option> 
      <option value="7">小分类7 </option> 
      <option value="8">小分类8 </option> 
      <option value="9">小分类9 </option> 
      <option value="10">小分类10 </option> 
      </optgroup>
      </select>
      

  5.   


    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>Untitled Document</title>
     <SCRIPT LANGUAGE="JavaScript">
      <!--
        function RemoveMe(){   
        document.getElementById("select").options[0].parentNode.removeChild(document.getElementById("select").options[0]);
    document.getElementById("select").options[5].parentNode.removeChild(document.getElementById("select").options[5]);
        }
      //-->
      </SCRIPT>
    </head><body onload="RemoveMe();">
    <select name="select" id="select">
      <option>大分类a </option> 
      <option value="1">小分类1 </option> 
      <option value="2">小分类2 </option> 
      <option value="3">小分类3 </option> 
      <option value="4">小分类4 </option> 
      <option value="5">小分类5 </option> 
      <option>大分类b </option> 
      <option value="6">小分类6 </option> 
      <option value="7">小分类7 </option> 
      <option value="8">小分类8 </option> 
      <option value="9">小分类9 </option> 
      <option value="10">小分类10 </option> 
    </select>
    </body>
    </html>
      

  6.   

    有个缺陷，optgroup不能嵌套，要是能形成一个树形就漂亮了
      

  7.   

    仅凭 HTML 办不到，HTML +　JS 就没问题了，一会儿写个放上来。
      

  8.   

    浏览器会自动将全部 optgroup 连接到 select 下面，所以即使按嵌套格式写了也不行（除了代码看起来好看），
    除非自己分析 select 的 innerHTML 结构，不过那样就太烦人。
    所以，为了简便起见，手动给 optgroup 添加了 level 属性，
    遍历时根据 level 值在前面加上全角空格即可缩进了！L@_@K<!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>dhtml.select.simulateMultipleHierarchy.html</title>
      <meta name="generator" content="editplus" />
      <meta name="author" content="[email protected]" />
      <meta name="keywords" content="dhtml js csdn" />
      <meta name="description" content="for csdn.net" />
     </head> <body>
    <select name="selCategory" id="selCategory">
    <option value=""><-- 请选择分类 --></option>
    <optgroup LABEL="特大分类 I" level="0">
    <option value="0">大分类a </option>
    <optgroup LABEL="大分类b" level="1">
    <option value="1">小分类1</option>
    <option value="2">小分类2</option>
    <option value="3">小分类3</option>
    <option value="4">小分类4</option>
    <option value="5">小分类5</option>
    <optgroup LABEL="小分类6" level="2">
    <option value="1">特小分类1</option>
    <option value="2">特小分类2</option>
    <option value="3">特小分类3</option>
    <optgroup LABEL="特小分类6" level="3">
    <option value="1">更小分类1</option>
    <option value="2">更小分类2</option>
    </optgroup>
    </optgroup>
    </optgroup>
    <optgroup LABEL="特大分类 II" level="0">
    <option value="6">大分类c</option>
    <option value="7">大分类d</option>
    <option value="8">大分类e</option>
    <option value="9">大分类f</option>
    <option value="10">大分类g</option>
    </optgroup>
    </select>
     </body>
     <script type="text/javascript">
     <!--
    var blankBlock = "　";
    var prefixFilling;
    var collSel = document.getElementsByTagName("select");
    var oSel;
    var collOptGrp;
    var oOptGrp;
    var iLevel;
    for (var i=0; i<collSel.length; i++)
    {
    oSel = collSel[i];
    collOptGrp = oSel.getElementsByTagName("optgroup"); for (var j=0; j<collOptGrp.length; j++)
    {
    oOptGrp = collOptGrp[j];
    oParent = oOptGrp.parentNode;
    // NOTE: level 属性是手动加上去的。
    iLevel = parseInt(oOptGrp.level);
    if (iLevel > 0)
    {
    prefixFilling = "";
    for (var k=0; k<iLevel; k++)
    {
    prefixFilling += blankBlock;
    } oOptGrp.label = prefixFilling + oOptGrp.label; for (var k=0; k<oOptGrp.childNodes.length; k++)
    {
    if (oOptGrp.childNodes[k].nodeType == 1)
    oOptGrp.childNodes[k].text = prefixFilling + oOptGrp.childNodes[k].text;
    }
    }
    }
    }
     //-->
     </script>
    </html>