Select boxes not working

JavaScript
1

I have two select boxes. Sbox1 and sbox2.
Sbo1 populates onpage load by a javascript. Sbox2 should be populated based on value selected in Sbox1.

However this is not happenning. The javascript function to populate this is invoked by onchange event. I have inserted slert statement to verify and it works perfectly fine. but the Sbox2 is not being populated even after successful execution.

Javascrit code :

window.onload = set_sttime(); 

function set_sttime() {

    var sec = document.getElementById("sttime");
    var mnhr = 0;
    var mxhr = 24;
    var mnmn = 0;
    var mxmn = 56;
    create_option (mnhr, mxhr, mnmn, mxmn, sec);
} 

function create_option (minhr, maxhr, minmn, maxmn, section) {
 
    var element = section;
    for (var hr = minhr; hr < maxhr; hr++) {
    for (var mn = minmn ; mn < maxmn; mn = mn + 5 ) {
    h = hr > 9 ? "" + hr: "0" + hr;
    m = mn > 9 ? "" + mn: "0" + mn;
    st = h + " : " + m ;
    var option = document.createElement("option");
    option.value = st;
    option.text = st;
    element.appendChild(option) 
    }
  }
} 

sttime.onchange = function() {
 
    var sttime = document.getElementById("sttime").value;
    var sthr = sttime.slice(0,2);
    var m1hr = 0;
    var m2hr = (24 - sthr);
    var sect = document.getElementById("durtime");
    var m1mn = 0;
    var m2mn = 56;
    create_option (m1hr, m2hr, m1mn, m2mn, sect); 
}
2

It seems to work for me. When the first select has an option chosen, the second select box fills with the time options.

You should note that the currently selected select option doesn’t trigger the onchange event, so having a default first option can be of some help there.

<select id="...">
    <option value="">Please select</option>
    ...
</select>
3

Thanks Paul.

I did try this code with a browser default select and it works just fine. But the select box that I’m using is a modified version by Materializecss. I wonder whether my JS is conflicting with the built in JS for this select box.

4

That’s possible since you are using old fashioned event handlers that overwrite one another rather than event listeners that can’t interfere with other event listeners (unless what they are trying to do conflicts)

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.