CODEWITHSUNDEEP
javascripthtml
user12376832
user12376832

Reputation: 1

HTML code not loading the data in list box

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>

Upvotes: 0

Views: 24

Answers (1)

Harshana
Harshana

Reputation: 5476

There were few issues in your code:

  1. You didn't define the category select box
  2. 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>

Upvotes: 1

Related Questions