The issue I am encountering is that these two select elements within the same control-group are being displayed vertically when I want them to be displayed horizontally. I attempted using inline-block in CSS, but there are other <div> elements with the same control-group class that have different width and margin settings. Changing the class name did not resolve the issue either.
<div class="control-group">
<label for="week">Dispatch schedule:</label>
<select class="form-control" name="week" id="week" title="Delivery" style="width:110px;">
<option data-val='OPEN' value="READY">Ready</option>
<option data-val='CLOSE' value="1st WEEK">1st Week</option>
<option data-val='CLOSE' value="2nd WEEK">2nd Week</option>
<option data-val='CLOSE' value="3rd WEEK">3rd Week</option>
</select>
<select name="Delivery" id="Delivery" disabled="">
<option value="OPEN">Open</option>
<option value="CLOSE">Close</option>
</select>
<script>
var category = document.getElementById('Delivery');
document.getElementById('week').onchange = function() {
var optionSelected = this.options[this.selectedIndex];
if (optionSelected.textContent != '-') {
if (optionSelected.dataset.val === 'OPEN') {
category.value = 'OPEN';
} else {
category.value = 'CLOSE';
}
} else {
category.value = '';
}
}
</script>
</div>