JSFiddle - React, Tailwind, and code Playground
HTML
<form onSubmit="return jsValidatePage1();">
<select name="select1" id="select1" size="1" onChange="select_update('select1','select2');" required>
<option value="" selected="selected">-- Select1 --</option>
<option value="1">Select1, Option1</option>
<option value="2">Select1, Option2</option>
<option value="3">Select1, Option3</option>
<option value="4">Select1, Option4</option>
<option value="5">Select1, Option5</option>
</select>
<br>
<br>
<select name="select2" id="select2" size="1" required>
<option value="" selected="selected">-- Select2 --</option>
<option value='' DISABLED>(empty)</option>
</select>
<br>
<br>
<select name="select3" id="select3" size="1" required>
<option value="" selected="selected">-- Select3 --</option>
<option value="1">Select3, Option1</option>
<option value="2">Select3, Option2</option>
<option value="3">Select3, Option3</option>
<option value="4">Select3, Option4</option>
<option value="5">Select3, Option5</option>
</select>
<br>
<br>
<input type="text" name="dummy" value="" required="">
<br>
<br>
<input id="submitbtn" type="submit" />
</form>
JavaScript
sel2 = null;
submit = document.getElementById('submitbtn');
submit.addEventListener('mousedown',function(){sel2.setAttribute('required',true);});
function select_update(srcCtrlId, DstCtrlId) {
//alert(srcCtrlId+','+DstCtrlId+','+url);
sel1 = document.getElementById(srcCtrlId);
srcValue = sel1.value;
sel2 = document.getElementById(DstCtrlId);
sel2.removeAttribute('required');
while (sel2.options.length > 0) {
sel2.remove(0);
}
if (srcValue == '') {
var oOption = new Option('(no matches)', '', true, true);
sel2.add(oOption);
} else {
var oOption = new Option('-- Select2 --', '', true, true);
sel2.add(oOption);
for (i = 1; i <= 5; ++i) {
v = srcValue * 10 + i;
s = 'Select2, Option' + v;
var oOption = new Option(s, v, false, false);
sel2.add(oOption);
}
}
}
function jsValidatePage1() {
alert('onSubmit');
return false;
return true;
}