我们可以在HTML下拉列表中选择组吗?

时间:2010-05-12 18:02:09

标签: html

我想在下拉列表中以组的形式显示一些数据。我们可以选择一个组而不是一个组成员,以便在下拉列表中选择完整组。如果是,那么如何,如果没有,那么可以使用任何其他方式或其他控制?

由于 Ashwani

1 个答案:

答案 0 :(得分:4)

如果你的意思是你可以在表格的select框内收集一组选项,那么是的,我相信你可以:

      <form method="post" action="" enctype="form/multipart">
        <fieldset>
          <select>
            <optgroup label="numbers">
              <option>One</option>
              <option>Two</option>
              <option>Three</option>
            </optgroup>

            <optgroup label="letters">
              <option>a</option>
              <option>b</option>
              <option>c</option>
            </optgroup>
          </select>
        </fieldset>
      </form>

demo at: http://jsbin.com/iwada3/edit

在认识到我是个白痴之后编辑,并解决了真正被问到的问题(对不起,漫长的一天......):

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

  <script type="text/javascript">

    $(document).ready(
      function() {
       $('option.all').click(
         function() {
           $(this).parent().children().attr('selected','selected');
           $(this).attr('selected','');
         }
         );
      }
      );

  </script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>
</head>
<body>

  <form>
    <fieldset>
      <select multiple>
        <optgroup class="num" label="numbers">
          <option class="num all">Select all:</option>
          <option class="num">One</option>
          <option class="num">Two</option>
          <option class="num">Three</option>
        </optgroup>

        <optgroup  class="let"label="letters">
          <option class="let all">Select all:</option>
          <option class="let">a</option>
          <option class="let">b</option>
          <option class="let">c</option>
        </optgroup>
      </select>
    </fieldset>
  </form>
</body>
</html>​​​​​​​​​

演示于:http://jsbin.com/ebeke3

它确实需要jQuery(至少在这个版本中),但我无法看到JS的替代品,我很遗憾地说。

如果你的意思是别的,那么我不确定我是否理解这个问题。