Question

132

HTML Reload Dropdown Value JavaScript

rated 0 times [ 133] [ 1] / answers: 1 / hits: 6116 / 10 Years ago, mon, february 17, 2014, 12:00:00

I Have a script like this:

<html>

<head></head>

<body>

<select id=first onchange=deleteitem()>

    <option value=1>One</option>

    <option value=2>Two</option>

    <option value=3>Three</option>

    <option value=4>Four</option>

    <option value=5>Five</option>

    <option value=6>Six</option>

    <option value=7>Seven</option>

    <option value=8>Eight</option>

    <option value=9>Nine</option>

</select><br >

<select id=second >

    <option value=1>One</option>

    <option value=2>Two</option>

    <option value=3>Three</option>

    <option value=4>Four</option>

    <option value=5>Five</option>

    <option value=6>Six</option>

    <option value=7>Seven</option>

    <option value=8>Eight</option>

    <option value=9>Nine</option>

</select><br >



<script>

    var one = document.getElementById('first');

    var two = document.getElementById('second');



    function deleteitem() {

        for(var i = one.selectedIndex; i >= 0; i--){

            two.remove(i);

            for(var x = one.length;x>=one.selectedIndex+5;x--) {

                two.remove(x);

            }

        }

    }

</script>

</body>

</html>

When user change first dropdown, it will remove some items in second dropdown.

My question is: how can I reload second dropdown when I select first dropdown without refreshing page?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

zane

Add To Favorites

Follow

Total Points: 471

Total Questions: 94

Total Answers: 91

Location: Bahrain

Member since Sun, Mar 27, 2022

2 Years ago

answered 10 Years ago kinsley · Accepted Answer

Its already answered here

function bindDdl() {

            try {

                var ddl = document.getElementById('ddl1');

                var x = PageMethods.GetData('', onsuccess, onfail);

            }

            catch (e) {

                alert(e);

            }

        }

        function onsuccess(result) {

            try {

                var ddl = document.getElementById('ddl1');

                var count= ddl.options.length;

                while (ddl.options.length > 0) {

                    ddl.options.remove(0);

                }



                for (var i = 0; i < result.length-1; i=i+2) {

                    var opt = document.createElement(option);



                    // Assign text and value to Option object

                    opt.text = result[i];

                    opt.value = result[i+1];

                    ddl.options.add(opt);

                }

            }

            catch (e) {

                alert(e);

            }

        }

You can have the onchange event like this

Take a look at here

So you can reload it but

NOTE :- if you are binding server side controls at client side it will always give you an error
Instead bind them on server side and add values at client side its preferable