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 = #
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.
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>
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.