Member Avatar for ditty

I have a list box for multiple selection. It contains some main list and sublist. My aim is no one couldn't select the main list. for eg:

Project manager
Arun
Pradeesh
Team Leader
Madhu
Jibin

Anybody couldn't select the main heading such as Project manager and Team Leader.. Pls help me to solve this problem.

  • 2 Contributors
  • 2 Replies
  • 227 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by ditty

Dani AI

Generated

As described, the goal is to show group headings inside a multi-select while preventing those headings from being chosen. As pointed out, the semantic HTML solution is to use the optgroup element: it provides a non-selectable label and keeps the actual names as real <option> values.

<select name="people[]" id="people" multiple size="6">
  <optgroup label="Project manager">
    <option value="arun">Arun</option>
    <option value="pradeesh">Pradeesh</option>
  </optgroup>

  <optgroup label="Team Leader">
    <option value="madhu">Madhu</option>
    <option value="jibin">Jibin</option>
  </optgroup>
</select>

If the markup generator only produces plain <option> items and cannot emit optgroup, an alternative is to insert non-selectable headings as disabled options and, optionally, add a small JavaScript fallback to ensure they never end up selected by scripts or edge-case UAs:

<select id="people" multiple size="6">
  <option class="heading" disabled>Project manager</option>
  <option value="arun">Arun</option>
  <option value="pradeesh">Pradeesh</option>
  <option class="heading" disabled>Team Leader</option>
  <option value="madhu">Madhu</option>
  <option value="jibin">Jibin</option>
</select>

<script>
document.getElementById('people').addEventListener('change', function () {
  Array.from(this.options).forEach(function (opt) {
    if (opt.classList && opt.classList.contains('heading')) opt.selected = false;
  });
});
</script>

Notes: optgroup is best for semantics and accessibility; disabled <option> values are not submitted and may render differently across browsers. Native <option> styling is limited—use a custom widget with ARIA only when visual control is essential. Always validate submitted values server-side (for example in PHP) so heading text cannot be injected as an accepted choice.

Recommended Answers

All 2 Replies

Member Avatar for ditty

thank you nav33n. Thank you very much for your response.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.