0

i need to create 2 selection; 1st selection has fix option and the second selection will be base on the selected selection 1

selection 1
option 1 = number
option 2 = letter
option 3 = char

number
option 1 = 1
option 2 = 2
option 3 = 3

letter
option 1 = abc
option 2 = def

char
option 1 = !
option 2 = @
option 3 = #

3
Contributors
2
Replies
17
Views
3 Years
Discussion Span
Last Post by Taywin
0

something like this:

<select class="choose">
    <option value="" selected>choose</option>
    <option value="number">number</option>
    <option value="letter">letter</option>
    <option value="char">char</option>
</select>

//THIS DROP DOWN IS DISABLED BY DEFAULT SO YOU MUST CHOOSE AN OPTION 
FROM THE ABOVE DROP DOWN
<select class="number" disabled>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

//IF FOR EXAMPLE YOU CHOSE NUMBER FROM THE FIRST DROP DOWN THEN 
THE DROP DOWN FOR NUMBER WILL BE ENABLED
<script type="text/javascript">
    $(".choose").change(function(){
        if($(this).val() == "number" )
        {
            $(".number").prop({disabled: false});
        }
    });
</script>

then u do the same thing for ur other drop down. unless what ur after is more complex than that then u should elaborate so the experts on daniweb can help u out. help them, help you.

Edited by nadiam

0

Here is one way of doing it in JavaScript... Also, if a user refresh the page, the user must select at least once before options in the second selection appear again.

<html>
<head>
 <title>Test</title>
 <script type="text/javascript">
 function changeOptions(selObj, changeSelectId) {
   var targetSel = document.getElementById(changeSelectId)
   if(selObj && selObj.tagName && selObj.tagName=="SELECT" && targetSel && targetSel.tagName && targetSel.tagName=="SELECT") {
     var opts=null
     if (selObj.value==1) { opts = ['1', '2', '3'] }
     else if (selObj.value==2) { opts = ['abc', 'def'] }
     else if (selObj.value==3) { opts = ['!', '@', '#'] }

     if (opts != null) {  // ok to build
       // remove current options
       var oldopts = targetSel.options
       for (var i=oldopts.length-1; i>=0; i--) {
         oldopts[i].parentNode.removeChild(oldopts[i])
       }
       // rebuild each option
       for (var i=0; i<opts.length; i++) {
         var newEl = document.createElement('option')
         newEl.value = (i+1)
         newEl.innerHTML = opts[i]
         targetSel.appendChild(newEl)
       }
     }
   }
 }
 </script>
</head>

<body>
 <select name="myselection" onchange="changeOptions(this, 'secondselection')">
 <option value=1>number</option>
 <option value=2>letter</option>
 <option value=3>char</option>
 </select>

 <select id="secondselection" name="realselect">
 </select>
</body>
</html>

Edited by Taywin

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.