'Select option change values based on first select option , Jquery

A brief explanation on the code below:

  1. 2 select options , with 1 button
  2. the (#myButton) triggers the alert
  3. The (#op2) 2nd select option value, depends on the first selection (#op1)

On JSFiddle my code work but whenever I transfer it on my website I get the Uncaught : TypeError. Please provide your suggestions to resolve TypeError.

  $('#myButton').on('click', function() {
  var op1 = document.getElementById("op1").value;
  alert(op1);
    var op2 = document.getElementById("op2").value;
  alert(op2);


if (op1 =='a'){
  $("#op2").html("<select id='op2'><option value='800'>800</option><option value='3000'>3000</option></select>");
}

})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select  id="op1" >
        <option value="a">a</option>
        <option value="b">b</option>
           <option value="all">all</option>
        </select>
        
        
<select  id="op2">
    <option value="1">1</option>
    <option value="11">11</option>
</select>

<input type="submit" value="button" id="myButton" class="buttonClass"  />

enter image description here
enter image description here

javascripthtmljquery


Solution 1:[1]

Your script needs to be placed in the head tag <head></head> and must be loaded before your script.

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="yourLocalPath.js"></script>
</head>
<body>

<select  id="op1" >
        <option value="a">a</option>
        <option value="b">b</option>
           <option value="all">all</option>
        </select>
        
        
<select  id="op2">
    <option value="1">1</option>
    <option value="11">11</option>
</select>

<input type="submit" value="button" id="myButton" class="buttonClass"  />
</body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Bjop

Related Questions