JavaScript function called from HTML to add options to a dropdownlist isn't working properly

Question

I have been working for a school project lately and I have had problems with HTML and JavaScript. What I want to do is fill a "dropdownlist" values as soon as I change the value of the first "dropdownlist". From what I have tested, it looks like the function isn't being called at all. I just got into web developing and I don't really have many ideas about this. I would really appreciate it if someone took the time to look at it.

<html>
<head>
    <script type="text/javascript">
    function showViti(s1,s2) {
        var s1 = document.getElementById(s1);
        var s2 = document.getElementById(s2);
        s2.innerHTML = "";
        if(s1.value == "1"){
            var optionArray = ["|","1|1","2|2","3|3"];
        }
        for(var option in optionArray){
            var pair = optionArray[option].split("|");
            var newOption = document.createElement("option");
            newOption.value = pair[0];
            newOption.innerHTML = pair[1];
            s2.options.add(newOption);
        }

    };
    function showParalel(s3,s4){
        var s3 = document.getElementById(s3);
        var s4 = document.getElementById(s4);
        s4.innerHTML = "";
        if(!s3.value = "0"){
            var optionArray1 = ["|","A1|A1","A2|A2","B1|B1","B2|B2"];
        }
        for(var option in optionArray1){
            var pair = optionArray1[option].split("|");
            var newOption1 = document.createElement("option");
            newOption1.value = pair[0];
            newOption1.innerHTML = pair[1];
            s4.options.add(newOption1);     
        }
    };
    </script>
<body>
    <img class="logo" alt="Logoja e FSHN" src="customLogo.png" width="25%">
    <h3> Orari Mesimor | Fakulteti i Shkencave te Natyres </h3>
    <form method="post">
       <b>Dega:</b> 
       <select id="inputdega" name="inputdega" class="dropDownList" onchange="showViti(this.id, 'inputviti')">
          <option value="0" selected>--zgjidh degen--</option>
          <option value='1'> "Bachelor" ne "Teknologji Informacioni dhe Komunikimi"</option>
       </select>
       </br>
       <b>Viti:</b> 
       <select id="inputviti" name="inputviti" class="dropDownList" onchange="showParalel(this.id,'inputparaleli')">
          <option value="0" selected>--zgjidh vitin--</option>
       </select>
       </br>
       <b>Paraleli:</b> 
       <select id="inputparaleli" name="Paraleli" class="dropDownList">
          <option value="0" selected>--zgjidh paralelin--</option>
       </select>
       <input type="Submit" name="Submit" value="Afisho" onclick="afishoorarin()" style="vertical-align: middle; border: 1px solid #DDD; background-color: #FEFCFA; height: 30px;">
    </form>
</body>
</head>
</html>

BTW, your <body> element is a child of your <head> element. For things to function well, your head should be above your body: basic HTML template. — Web_Designer
– Web_Designer, Commented Jan 17, 2017 at 1:27

Willi Pasternak · Accepted Answer · 2017-01-14 23:47:48Z

Hey your script has one little typo. i just changed one line from:

if(!s3.value = "0")

to :

if(!s3.value == "0")

    <html>
    <head>
    <script type="text/javascript">
    function showViti(s1,s2) {
          var s1 = document.getElementById(s1);
    	  var s2 = document.getElementById(s2);
    	  s2.innerHTML = "";
    	  if(s1.value == "1"){
    	     var optionArray = ["|","1|1","2|2","3|3"];
    	  }
    	  for(var option in optionArray){
    	     var pair = optionArray[option].split("|");
    		 var newOption = document.createElement("option");
    		 newOption.value = pair[0];
    		 newOption.innerHTML = pair[1];
    		 s2.options.add(newOption);
    	  }
    	  
    };
    function showParalel(s3,s4){
          var s3 = document.getElementById(s3);
    	  var s4 = document.getElementById(s4);
    	  s4.innerHTML = "";
    	  if(!s3.value == "0"){
    	      var optionArray1 = ["|","A1|A1","A2|A2","B1|B1","B2|B2"];
    	  }
    	  for(var option in optionArray1){
    	      var pair = optionArray1[option].split("|");
              var newOption1 = document.createElement("option");
              newOption1.value = pair[0];
              newOption1.innerHTML = pair[1];
              s4.options.add(newOption1);		  
    	  }
    };
    
    </script>
    <body>
      <img class="logo" alt="Logoja e FSHN" src="customLogo.png" width="25%">
      <h3> Orari Mesimor | Fakulteti i Shkencave te Natyres </h3>
    <form method="post">
    <b>Dega:</b> <select id="inputdega" name="inputdega" class="dropDownList" onchange="showViti(this.id, 'inputviti')">
       <option value="0" selected>--zgjidh degen--</option>
       <option value='1'> "Bachelor" ne "Teknologji Informacioni dhe Komunikimi"</option>
    </select></br>
    <b>Viti:</b> <select id="inputviti" name="inputviti" class="dropDownList" onchange="showParalel(this.id,'inputparaleli')">
             <option value="0" selected>--zgjidh vitin--</option>
    		 </select></br>
    <b>Paraleli:</b> <select id="inputparaleli" name="Paraleli" class="dropDownList">
                 <option value="0" selected>--zgjidh paralelin--</option>
    </select>			 
    <input type="Submit" name="Submit" value="Afisho" onclick="afishoorarin()" style="vertical-align: middle; border: 1px solid #DDD; background-color: #FEFCFA; height: 30px;">
    </form>
    </body>
    </head>
    </html>

Thank you very much. I don't know what i was thinking there. That solved the problem.
Okay Great 👍 can you Mark the answer as Solution ? Thank you

Collectives™ on Stack Overflow

JavaScript function called from HTML to add options to a dropdownlist isn't working properly

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related