Geek asks and answers

Updating HTML to Unload JavaScript

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 the user changes the first drop-down list, he deletes some items in the second drop-down list.

My question is: how can I reload the second drop-down menu when I select the first drop-down menu without refreshing the page?

+3
source share
2 answers

It’s already said 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 may have an onchange event like this

Look at here

So you can reload it, but

NOTE. - If you bind server controls on the client side, it will always give you an error Instead, bind them on the server side and add values ​​on the client side, which is preferable

0
source

- :

function reload() {
    var two = document.getElementById('second');
    // clear the select with id="two"
    two.innerHTML = "";
    // re-add the options
    var words = new Array("One", "Two", "Three", "Four" ... ); // fill it up yourself
    for(var i = 1; i <= 9; i++) {
      var option = document.createElement("option");
      option.text = words[i-1];
      option.value = i;
      two.appendChild(option);
    }
}
0

More articles:


All Articles