HTML code not loading the data in list box

Question

I am creating two combo boxes the first one gets loaded initially and up on selecting the text in the combo the second combo box should get filtered. The issue is combo box is not getting loaded.

 <html> <head>

    <title> text conversion  </title> <script type="text/javascript">
        function PrepopulateProductName() {   alert("Hello! I am an alert box!!");

            var selectHTML = "";

            var DEV = ["GTXD", "SFGD", "ITXD", "ETXD","CTXD"];
            var SYS = ["GTXS", "ITXS", "ETXS", "CTXS"];
            var ACC = ["GTXA", "ITXA", "ETXA", "CTXA", "SFGA"];

            alert("Hello! I am an alert box!!");
            if (document.getElementById("selProductName").value == "DEV") {
               var select = document.getElementById('category').options.length;

               for (var i = 0; i < select; i++) {
                   document.getElementById('category').options.remove(i);
               }

               for (var i = 0; i < DEV.length; i++) {
                   var newSelect = document.createElement('option');
                   selectHTML = "<option value='" + DEV[i] + "'>" + DEV[i] + "</option>";
                   newSelect.innerHTML = selectHTML;
                   document.getElementById('category').add(newSelect);
               }
           }

           PrepopulateProductName();

       </script> </head> <body>

        Product Name: <select id="selProductName" name="selProductName"
        onchange="changeProductName(this.value);">   <option>--Choose Product
        Name--</option> </select>

    </body> </html>

On a side note, you're missing the closing } in your function — Hisham Bawa
– Hisham Bawa, Commented Dec 8, 2020 at 2:07

Harshana · Accepted Answer · 2020-12-08 02:02:35Z

There were few issues in your code:

You didn't define the category select box
Called an undefined function changeProductName()

This is what you can do:

With the onchange attribute, call the PrepopulateProductName() function. Then, it will check for the selected option and populate the category select box with the values defined.

Example:

function PrepopulateProductName() {

            //alert("Hello! I am an alert box!!");

            var selectHTML = "";

            var DEV = ["GTXD", "SFGD", "ITXD", "ETXD","CTXD"];
            var SYS = ["GTXS", "ITXS", "ETXS", "CTXS"];
            var ACC = ["GTXA", "ITXA", "ETXA", "CTXA", "SFGA"];

            //alert("Hello! I am an alert box!!");
            if (document.getElementById("selProductName").value == "DEV") {
             var select = document.getElementById('category').options.length;

             for (var i = 0; i < select; i++) {
                 document.getElementById('category').options.remove(i);
             }

             for (var i = 0; i < DEV.length; i++) {
                 var newSelect = document.createElement('option');
                 selectHTML = "<option value='" + DEV[i] + "'>" + DEV[i] + "</option>";
                 newSelect.innerHTML = selectHTML;
                 document.getElementById('category').add(newSelect);
             }
         }
     }

 <html> <head>

    <title> text conversion  </title> 

</head> 
<body>

    Product Name: <select id="selProductName" name="selProductName"
    onchange="PrepopulateProductName();">   <option>--Choose Product
    Name--</option> <option value="DEV">DEV</option> </select>

    <select id="category" name="category">  </select>
</body> </html>

Collectives™ on Stack Overflow

HTML code not loading the data in list box

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related