Hi,
I'm having problems getting a second list box to populate, The value is undefined in the second list. I think its how i'm trying to add the vaule option.
I'm just starting JS so any help would be great.
Thanks
<script language="JavaScript">
<!--
var shifts;
function init(){
//to initialize them all to the same times
shifts={dayOfWeek: [{day: "monday",theShifts: ["1","2","3"],theValues: [3,2,6]},{day:"tuesday",theShifts: ["4","2","5"],theValues:[3,2,6]}]};
}
//change day function
function changeDay(elem){
var j, day;
var shiftText;
if(elem.selectedIndex == 0) //if they selected our pretty [select a day] stmt
return false; //do nothing and leave quietly
//Clear the second drop down of all but top [select a shift]
for (i = document.frmFormName.workday.options.length - 1; i >= 1; i--) document.frmFormName.workday.options = null;
document.frmFormName.workday.selectedIndex = 0;
//grab day from select box
day = elem.selectedIndex;
for(j=0;j<shifts.dayOfWeek[day].theShifts.length;j++){
document.frmFormName.workday.options[j] = new Option(shifts.dayOfWeek[day].theShifts[j]);
document.frmFormName.workday.options[j] = new Option(shifts.dayOfWeek[day].theValues[j]);
document.frmFormName.workday.options[j].text = shifts.dayOfWeek[day].theShifts[j].text;
document.frmFormName.workday.options[j].value = shifts.dayOfWeek[day].theValues[j].value;
}
}
//-->
</script>
</script>
</head>
<body onLoad="init();">
<form method=POST action="wherever.html" name="frmFormName">
<select name="weekday" onChange="changeDay(this);">
<option value="0">[Select a day]</option>
<option value="1">Monday</option>
<option value="2">Tuesday</option>
</select>
<select name="workday" id="workday">
<option value="0">[Select a Shift]</option>
</select>
</form>
</body>
</html>
I'm having problems getting a second list box to populate, The value is undefined in the second list. I think its how i'm trying to add the vaule option.
I'm just starting JS so any help would be great.
Thanks
<script language="JavaScript">
<!--
var shifts;
function init(){
//to initialize them all to the same times
shifts={dayOfWeek: [{day: "monday",theShifts: ["1","2","3"],theValues: [3,2,6]},{day:"tuesday",theShifts: ["4","2","5"],theValues:[3,2,6]}]};
}
//change day function
function changeDay(elem){
var j, day;
var shiftText;
if(elem.selectedIndex == 0) //if they selected our pretty [select a day] stmt
return false; //do nothing and leave quietly
//Clear the second drop down of all but top [select a shift]
for (i = document.frmFormName.workday.options.length - 1; i >= 1; i--) document.frmFormName.workday.options = null;
document.frmFormName.workday.selectedIndex = 0;
//grab day from select box
day = elem.selectedIndex;
for(j=0;j<shifts.dayOfWeek[day].theShifts.length;j++){
document.frmFormName.workday.options[j] = new Option(shifts.dayOfWeek[day].theShifts[j]);
document.frmFormName.workday.options[j] = new Option(shifts.dayOfWeek[day].theValues[j]);
document.frmFormName.workday.options[j].text = shifts.dayOfWeek[day].theShifts[j].text;
document.frmFormName.workday.options[j].value = shifts.dayOfWeek[day].theValues[j].value;
}
}
//-->
</script>
</script>
</head>
<body onLoad="init();">
<form method=POST action="wherever.html" name="frmFormName">
<select name="weekday" onChange="changeDay(this);">
<option value="0">[Select a day]</option>
<option value="1">Monday</option>
<option value="2">Tuesday</option>
</select>
<select name="workday" id="workday">
<option value="0">[Select a Shift]</option>
</select>
</form>
</body>
</html>