为什么不用optgroup？

<select id="food" name="food">
  <optgroup label="Fruits">
    <option value="1">Apples</option>
    <option value="3">Bananas</option>
    <option value="4">Peaches</option>
    <option value="5">...</option>
  </optgroup>
  <optgroup label="Vegetables">
    <option value="2">Carrots</option>
    <option value="6">Cucumbers</option>
   <option value="7">...</option>
 </optgroup>
 <optgroup label="Baked Goods">
   <option value="8">Apple Pie</option>
   <option value="9">Chocolate Cake</option>
   <option value="10">...</option>
 </optgroup>

字符串
在这里摆弄（看看它看起来如何）：http://jsfiddle.net/rn39c/
我认为这可能是你正在寻找的，因为类别只是标签和子类别的选项（与一个值，是张贴到服务器）
编辑-然后你可以添加一些jQuery到w mix中（这是非常基本的，但它可以工作：你可以尝试改进它）：

$('#food option').hide();

$('optgroup').hover(function(){
   $(this).children('option').show();
}, function(){
    $(this).children('option').hide();
});

型
小提琴：http://jsfiddle.net/rn39c/1/

我不知道有什么方法可以用jQuery做到这一点，但是通过设置选择列表允许多个选择选项，你会自动得到符合你标准的东西：

<select multiple="multiple">

字符串

更新

如果你需要选择在某些时候作为标准，在其他时候显示所有选项，你可以考虑根据你的需要添加和删除multiple属性。
这里有一个单向更改的快速演示：http://jsfiddle.net/bGJAw/

打开和关闭select元素是一个内部操作，你不能通过JS操作。你可以使用size=5的select标签等使它始终可见，或者当用户选择某个元素时通过JS操作size属性使其“保持打开”，然后当用户结束交互时将其设置回1。

我不知道如果你正在寻找可以做，但你也可以尝试有2个选择元素。第一个将包含您的类别，第二个将根据所选的商品动态填充。