select option with javascript is not displaying select value

Question

select option with javascript is not displaying select value

3.5k views Asked by ajay At 14 September 2024 at 20:58

here i have a simple 3 select options , like select 1 ,select 2 and select 3 .

on changing select 1 option will reset the values in select 2 and select 3 , and on changing the select 2 values calling another javascript function to reset the values in select 3 .

the problem here is first select 1 is working fine and displaying select 2 values correctly upon selecting the value from select2 is not selecting always showing the one value.

if i remove the javascript onchange call from select 2 then its working fine.

sample code below .

function L1Change() {
    var obj = document.getElementById("L1");
    objVal = obj.options[obj.options.selectedIndex].value;

    var obj2 = document.getElementById("L2");
    obj2.options.length = 0;
    obj2.options[0] = new option("op33","1");
    obj2.options[0].selected = "true";

    if (objVal == 1) {
        obj2.options[1] = new option("op34","2");
        obj2.options[2] = new option("op35","3");
    }

    if (objVal == 2) {
        obj2.options[1] = new option("op44","2");
        obj2.options[2] = new option("op45","3");
    }
}

<select name="L1" id="I1" onChange="javascript:L1Change()">
    <option selected="selected" value="1">op1</option>
    <option  value="2">op2</option>
    <option  value="3">op3</option>
</select>

<select name="L2" id="I2" onChange="javascript:L2Change()">
    <option selected="selected" value="1">op11</option>
    <option  value="2">op12</option>
    <option  value="3">op13</option>
</select>

from the above code if i removed on change function from select2 values in select2 is working properly . any one give me an idea how to fix this issue .

Thanks.

Original Q&A

There are 1 answers

**Uma Kanth** · Accepted Answer · 2015-06-10 06:05:58

<!DOCTYPE html>
<html>
<head>
<script>
function configureDropDownLists(ddl1,ddl2) {
        var Customer = new Array('Customer1', 'Customer2', 'Customer3');
        var Script = new Array('Script1', 'Script2', 'Script3');
        var etc = new Array('etc1', 'etc2', 'etc3');
        var cust1 = new Array('cust11', 'cust12', 'cust13');
        var cust2 = new Array('cust21', 'cust22', 'cust23');
        var cust3 = new Array('cust31', 'cust32', 'cust33');

        switch (ddl1.value) {
            case 'Customer':
                ddl2.options.length = 0;
                for (i = 0; i < Customer.length; i++) {
                    createOption(ddl2, Customer[i], Customer[i]);
                }
                break;
            case 'Script':
                ddl2.options.length = 0; 
            for (i = 0; i < Script.length; i++) {
                createOption(ddl2, Script[i], Script[i]);
                }
                break;
            case 'etc':
                ddl2.options.length = 0;
                for (i = 0; i < etc.length; i++) {
                    createOption(ddl2, etc[i], etc[i]);
                }
                break;
            case 'Customer1':
                ddl2.options.length = 0;
                for (i = 0; i < etc.length; i++) {
                    createOption(ddl2, cust1[i], cust1[i]);
                }
                break;
            
            case 'Customer2':
                ddl2.options.length = 0;
                for (i = 0; i < etc.length; i++) {
                    createOption(ddl2, cust2[i], cust2[i]);
                }
                break;

            case 'Customer3':
                ddl2.options.length = 0;
                for (i = 0; i < etc.length; i++) {
                    createOption(ddl2, cust3[i], cust3[i]);
                }
                break;

                default:
                    ddl2.options.length = 0;
                break;
        }

    }

    function createOption(ddl, text, value) {
        var opt = document.createElement('option');
        opt.value = value;
        opt.text = text;
        ddl.options.add(opt);
    }
</script>
</head>
<body>

<select id="ddl" onchange="configureDropDownLists(this,document.getElementById('ddl2'))">
<option value=""></option>
<option value="Customer">Customer</option>
<option value="Script">Script</option>
<option value="etc">etc</option>
</select>

<select id="ddl2" onchange="configureDropDownLists(this,document.getElementById('ddl3'))">
</select>

<select id="ddl3">
</select>
</body>
</html>

TechQA.

select option with javascript is not displaying select value

There are 1 answers

Related Questions in JAVASCRIPT

Related Questions in HTML-SELECT

Popular Questions

Popular Tags

Trending Questions