ansaurus

Question

Can we select group in drop down list in HTML?

Answer 1

+1 A:

If you mean can you collect a sub-set of options within a select box of a form, then yes, I believe you can:

      <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

Edited after realising I'm a moron, and addressing the question that was really asked (I'm sorry, long day...):

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

  <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"&gt;&lt;/script&gt;
<![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>

Demo at: http://jsbin.com/ebeke3

It does require jQuery (in this version, at least), but I can't see an alternative to JS for what you require, I'm sorry to say.

If you mean something else, then I'm not sure I understand the question.

David Thomas 2010-05-12 18:07:11

Thanks Ricebowl, the implementation u gave, I m already having it, but what I want is to select group name also. I mean, in your code, (One, two, three) are in numbers group, can i select NUMBERS as an option. or any other approach?

Ashwani K 2010-05-12 18:14:45

I like your answer, but I suspect OP wants to choose ALL of the group members by selecting the OPTGROUP name. This example does not allow you to select the group name -- only the group members.

MJB 2010-05-12 18:16:15

@Ashwani K, @MJB; yeah, I'm apparently a moron...I'm just working through jsbin with a few ideas that feel like they should work, but don't. I'm assuming that you/he wants to click 'numbers' and then have all child `select`s highlighted?

David Thomas 2010-05-12 18:17:47

@RiceBowl, the childs need not be highlighted, if just the group can behave like an option?

Ashwani K 2010-05-12 18:20:53

You can't highlight the OPTGROUP and not highlighting = selecting the childs will not work. You cannot reinvent how forms work and you really shouldn't ignore how a user expects a for to react.

Kau-Boy 2010-06-04 12:52:29

@Kau-Boy, who was your comment addressing? It seems customary to prefix the addressee/recipient with the '@' symbol to indicate to whom you're talking. =)

David Thomas 2010-06-04 15:22:24

ansaurus

tags:

views:

answers:

Can we select group in drop down list in HTML?

related questions