Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

<select> lists 1

Status
Not open for further replies.
carlosAlberto

carlosAlberto

IS-IT--Management
Oct 9, 2001
109
GB
Hi all,

Is it possible to have multiple lines that are actually only 1 item in a select list.

e.g.

john
bob
ron

sue
peter
harry

Putting things into groups. If you try to select a name from the first group it selects all three names.
 
Sort by date Sort by votes
Never tried it, but have you tried putting a <br> tag in there?
Tracy Dryden
tracy@bydisn.com

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.
 
Upvote 0 Downvote
Here you go..
Code: 
<html>
<head>
<script Language=&quot;JavaScript&quot;>
<!--
function getGroup(elmt_ref) {
  var sItem = elmt_ref.options[elmt_ref.selectedIndex].value.slice(0,elmt_ref.options[elmt_ref.selectedIndex].value.indexOf(&quot;_&quot;))
  for(var i = 0; i < elmt_ref.length; i++) {
    elmt_ref.options[i].selected = false
  }
  for(var i = 0; i < elmt_ref.length; i++) {
    if(elmt_ref.options[i].value.slice(0,elmt_ref.options[i].value.indexOf(&quot;_&quot;)) == sItem) {
      elmt_ref.options[i].selected = true
    }
  }
}
function delGroupChars(form_ref) {
  for(var i = 0; i < form_ref.myList.length; i++) {
   if(form_ref.myList.options[i].selected) {
      form_ref.myList.options[i].value = form_ref.myList.options[i].value.slice(form_ref.myList.options[i].value.indexOf(&quot;_&quot;)+1,form_ref.myList.options[i].value.length)
    }
  }
  return true
}
//-->
</script>
</head>
<body>
<form onSubmit=&quot;return delGroupChars(this);&quot;>
<select size=&quot;9&quot; multiple name=&quot;myList&quot; onChange=&quot;getGroup(this);&quot;>
  <option value=&quot;1_John&quot;>John</option>
  <option value=&quot;1_Bret&quot;>Bret</option>
  <option value=&quot;1_Harry&quot;>Harry</option>
  <option value=&quot;2_Mary&quot;>Mary</option>
  <option value=&quot;2_Joanne&quot;>Joanne</option>
  <option value=&quot;2_Sue&quot;>Sue</option>  
  <option value=&quot;3_Spot&quot;>Spot</option>
  <option value=&quot;3_Rover&quot;>Rover</option>
  <option value=&quot;3_Whiskers&quot;>Whiskers</option>  
</select><br>
<input type=&quot;submit&quot; value=&quot;Submit&quot;>
</form>
</body>
</html>
Go ahead and load this page and run it to see how it works. I have created a multiple select list with three groups. The groups are identified by an identifier followed by an underscore BEFORE the option value. When you click on one item in the group, the JS function will select all others in that group. The onSubmit event handler will parse the group characters out of the option values before submittal so you'll just get the true option values at the server. You can see this at work when you submit the form, look in the address line. You'll see that the values being passed do not include the group characters or the underscore.

Because it's a select list, the visitor has the option of holding down the ctrl button and selecting more than one option. For this, I have the function capturing the first option they selected, storing that in a variable, clearing the list, then re-selecting the group that corresponds to the first option that was selected.

Hopefully it meets your needs.

ToddWW
 
Upvote 0 Downvote
I knew you were on this thread Tracy, so I took the extra time to put it together.. LOL

brag·ger, brag·gest adj.
1. Exceptionally fine

:)

ToddWW
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

LyndonOHRC
  • Locked
  • Question
Can I select all child TD's using Parent TR's id?
Replies
5
Views
402
vacunita
vacunita
Katerine
  • Locked
  • Question
CSS question: Displaying 2-level unordered lists in a table layout? 1
Replies
7
Views
205
Katerine
Katerine
1DMF
  • Locked
  • Question
HTML5 -&gt; 'input' tag -&gt; 'accept' attribute 1
Replies
5
Views
125
vacunita
vacunita
1DMF
  • Locked
  • Question
Can't select element following a parent of a child having a psuedo class
Replies
3
Views
108
1DMF
1DMF
1DMF
  • Locked
  • Question
What HTML5 tag is &lt;note_h1&gt;? 2
Replies
6
Views
117
1DMF
1DMF

Part and Inventory Search

Sponsor

Back
Top