[SOLVED] Onclick scrollbar changes

[mraza]

Hi i have 3 options list as <ul> now what i want is when first scrollbar is chosen the second and third will be enable and will display dates and time..and when somebody choose a date he will be taken to a registration form. for example in my second option i will display dates this will be only enable when the city is being selected from first list:

 

<select>
<option>Please Select</option>
<option> 12/12/2009</option>
<option > 12/12/2010</option>
<option> 12/12/2011</option>
<option> 12/12/2012</option>
</select>

 

 

here is the code for my option list:

 

<ul>
<li>I am in City<select name="dates">
    <option value=0 >Please Select</option>
<optgroup label='test'>
<option value=3 style='font-family:Arial; color:#ffffff;'> City One</option>
<option value=4 style='font-family:Arial; color:#ffffff;'> City Two</option>
<option value=5 style='font-family:Arial; color:#ffffff;'> City Three</option>
<option value=6 style='font-family:Arial; color:#ffffff;'> City Four</option></select></optgroup>
</li>
<li>Dates Available<select name="dates">
    <option value=0>Please Select</option></select>
</li>
<li>Times Available<select name="dates">
    <option value=0>Please Select</option></select>
</li>
</ul>

 

Please i am not much familiar with JavaScript and any quick help will be appreciated. Thanks a lot

[mraza]

ok got it working:

 

<ul>
<li>
I am in City <select name = "city" id = "city" style='font-family:Arial; color:#000000;' onchange = "enableDates()">
<option value=0 > Please Select </option>
<option value=3 > City One </option>
<option value=4 > City Two </option>
<option value=5 > City Three </option>
<option value=6 > City Four </option>
</select>
</li>
<br><br>

<li>Dates Available<select name="dates" id = "dates" disabled = true onchange = "enableTimes()">
<option value=0> Please Select </option>
<option value=1> Date One </option>
<option value=2> Date Two </option>
</select>

</li>
<br><br>
<li>Times Available <select name="times" id = "times" disabled = true">
<option value=0> Please Select </option>
<option value=1> Time One </option>
<option value=2> Time Two </option>
</select>

</li>
</ul></div>


<script type = "text/javascript">
function enableDates() {
var sel = document.getElementById("city").value;
if (sel != 0) {
document.getElementById("dates").disabled = false;
}
else {
document.getElementById("dates").disabled = true;
document.getElementById("times").disabled = true;
}
}

function enableTimes() {
var sel = document.getElementById("dates").value;
if (sel != 0) {
document.getElementById("times").disabled = false;
}
else {
document.getElementById("times").disabled = true;
}

}
</script>