Cascading dropdown list in HTML

Question

Cascading dropdown list in HTML

421 Views Asked by GinTurGal At 14 September 2022 at 06:40

Ok I edited the question with below update.

I tried with below script but it seems not working. Please someone can show me what is wrong with below code.

<script>
var myselect = document.getElementById("start2");

document.getElementById("end1").onchange = createOption()
    
function createOption() {
var selectEnd = document.getElementById("end1");
var value = selectEnd.options[select.selectedIndex].value;
var objOption = document.createElement("option");
objOption.text = value + 1;
objOption.value = value +1;

//myselect.add(objOption);
myselect.appendChild(objOption);
}

</script>

What I want to do is there are 2 select list form with id End1 and Start2. I want when select list End1 onchange, value from End1 will be passed to Start2 with added 1. But, it has nothing happened.

Original Q&A

There are 1 best solutions below

**GinTurGal** · Answer 1 · 2022-09-23T07:28:24.050000

I have solved this problem. I want to share it. But, can I post it here as answer? Or need I to add in my first entry above?

<html>
<body id="myBody">  
<table>
<%
    for i = 1 to 5
%>
<tr>
<td>
<select id = "start<%=i%>" onChange="startChange(this.id)">
<option value=""></option>
</select>
</td>
<td>
<select id = "end<%=i%>" onChange="endChange(this.id)">
<option value=""></option>
</select>
</td>
</tr>
<%
    next
%>
</table>
<script>        
const serialEnd =+document.getElementById("start1").innerText + 100;
document.getElementById("myBody").onload = function() {optionLoad("end1")};
    
function optionLoad(id){
    var lastno = +id.substring(3,4);
    var selectElement = document.getElementById("end" +  lastno + "");      
    var serialStart = +document.getElementById("start" +  lastno + "").value;

    for (var serial = serialStart + 1; serial <= serialEnd; serial++) {
        selectElement.add(new Option(serial));
        }   
    }

function endChange(id) {
    var lastno = +id.substring(3,4);
    var selectStart = document.getElementById("start" + ( lastno + 1 ) + "");
    var selectEnd = document.getElementById(id);
    var options = selectEnd.options[selectEnd.selectedIndex];                       
    var objOption = document.createElement("option");
        
        if (lastno != 5){                           
        removeOptions(document.getElementById("start" + ( lastno + 1 ) + ""));
            objOption.text = +options.value + 1;
            objOption.value = +options.value + 1;
            selectStart.add(objOption);         
        }
    }

function startChange(id){
    var lastno = +id.substring(5,6);        
        removeOptions(document.getElementById("end" + lastno + ""));            
        optionLoad("end" + lastno + "");
    }
    
function removeOptions(selectElement) {
    var i, L = selectElement.options.length - 1;
    for(i = L; i >= 1; i--) {
            selectElement.remove(i);
        }
    }
</script>
</body>
</html>

Cascading dropdown list in HTML

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in DROPDOWN

Related Questions in CASCADING

Trending Questions

Popular # Hahtags

Popular Questions