Jump to content

DataList update from jquery


Maheshwaran
 Share

Recommended Posts

My idea is change the datalist based on Textbox.

# when textbox is empty, I want to display "initial,always"

# when textbox is select "initial or awlays" and datalist should show "LHS,RHS".

# again the textbox is empty, I want to show "initial,always".

 

Here the second scenario is showing only "initial" and when Textbox empty it showing "initial,always,LHS,RHS".

can you please give me some hint?

 

<!DOCTYPE HTML>
<html>
 
<head>
    <title>
        JQuery | Set value of input text.
    </title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
    </script>
 
</head>
 
<body style="text-align: center;">
    <input id="input" list="anrede" />
    <datalist id="anrede">
    </datalist>
    <br>
    <br>
    <script>
        var mycars = new Array();
        var block = new Array();
        mycars[0] = 'initial';
        mycars[1] = 'always';
        block[0] = 'LHS';
        block[1] = 'RHS';

        var options = '';

        $("#input").click(function(event) {
            $('#anrede').empty();
            var option = '';
            if ($('#input').val()=='') {
                for(var i = 0; i < mycars.length; i++)
                    options += '<option value="'+mycars+'" />';
                    $('#anrede').append(options);
            } else if ($('#input').val()=='initial') {
                for(var ii = 0; ii < block.length; ii++) {
                    options += '<option value="'+block[ii]+'" />';
                    $('#anrede').append(options);
                }
            }
        });
    </script>
</body>
 
</html>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...