onchange =“”在选择标记中不起作用

Question

I have two tags of select. Their IDs is "study-phase" and "study-year". I want when the value of study phase to process a CSS code.

HTML:

<select name="study-phase" onchange="myFunction()" id="study-phase" class="sp-input">
    <option value=""></option>
    <option id="pri" value="pri">Primary</option>
    <option id="pre" value="pre">Prep</option>
    <option id="sec" value="sec">Secondary</option>
</select>   
<select name="study-year" id="study-year" class="sp-input">
    <option value=""></option>
    <option id="a" value="aa">Grade 1</option>
    <option id="b" value="">Grade 2</option>
    <option id="c" value="">Grade 3</option>
    <option id="d" value="">Grade 4</option>
    <option id="e" value="">Grade 5</option>
    <option id="f" value="">Grade 6</option>
    <option id="g" value="">Grade 7</option>
    <option id="h" value="">Grade 8</option>
    <option id="i" value="">Grade 9</option>
    <option id="j" value="">Grade 10</option>                       
</select>
<style type="text/css">
    #a , #b , #c , #d , #f , #g , #h , #j , #k , #e , #i {
        display: none;
    }
</style>

JS:

$(function(myFunction()){
   if (document.getElementById("study-phase").value == "pri") {
       document.getElementById("a").style.display = "block";
   }
});

And after run the code the css code which I want don't launch. What's the problem here ?

Answer 1

$(function(myFunction()){
    if (document.getElementById("study-phase").value == "pri") {
        document.getElementById("a").style.display = "block";
    }});

give error

Uncaught SyntaxError: Unexpected token (

apart if you revised your code as below it works, as it is vanillaJs you dont need jquery

 function myFunction() { if (document.getElementById("study-phase").value == "pri") { document.getElementById("a").style.display = "block"; } }; 

 <select name="study-phase" onchange="myFunction()" id="study-phase" class="sp-input"> <option value=""></option> <option id="pri" value="pri">Primary</option> <option id="pre" value="pre">Prep</option> <option id="sec" value="sec">Secondary</option> </select> <select name="study-year" id="study-year" class="sp-input"> <option value=""></option> <option id="a" value="aa">Grade 1</option> <option id="b" value="">Grade 2</option> <option id="c" value="">Grade 3</option> <option id="d" value="">Grade 4</option> <option id="e" value="">Grade 5</option> <option id="f" value="">Grade 6</option> <option id="g" value="">Grade 7</option> <option id="h" value="">Grade 8</option> <option id="i" value="">Grade 9</option> <option id="j" value="">Grade 10</option> </select> <style type="text/css"> #a, #b, #c, #d, #f, #g, #h, #j, #k, #e, #i { display: none; } </style> 

Answer 2

HTML

<select name="study-phase" onchange="myFunction()" id="study-phase" class="sp-input">
    <option value=""></option>
    <option id="pri" value="pri">Primary</option>
    <option id="pre" value="pre">Prep</option>
    <option id="sec" value="sec">Secondary</option>
</select>
<select name="study-year" id="study-year" class="sp-input">
    <option value=""></option>
    <option id="a" value="aa">Grade 1</option>
    <option id="b" value="">Grade 2</option>
    <option id="c" value="">Grade 3</option>
    <option id="d" value="">Grade 4</option>
    <option id="e" value="">Grade 5</option>
    <option id="f" value="">Grade 6</option>
    <option id="g" value="">Grade 7</option>
    <option id="h" value="">Grade 8</option>
    <option id="i" value="">Grade 9</option>
    <option id="j" value="">Grade 10</option>                       
</select>
<style type="text/css">
  #a,
  #b,
  #c,
  #d,
  #f,
  #g,
  #h,
  #j,
  #k,
  #e,
  #i {
    display: none;
  }
</style>

JS:

function myFunction(){
     console.log("myFunction gets called");
    if (document.getElementById("study-phase").value == "pri") {
        document.getElementById("a").style.display = "block";
    }}

Just declare your function like this. And add a console.log to make sure that function is getting called "onchange" or not, which is after this change.

Answer 3

Try using the .change() event :

HTML

<select name="study-phase" id="study-phase" class="sp-input">
    <option value=""></option>
    <option id="pri" value="pri">Primary</option>
    <option id="pre" value="pre">Prep</option>
    <option id="sec" value="sec">Secondary</option>
</select>   
<select name="study-year" id="study-year" class="sp-input">
    <option value=""></option>
    <option id="a" value="aa">Grade 1</option>
    <option id="b" value="">Grade 2</option>
    <option id="c" value="">Grade 3</option>
    <option id="d" value="">Grade 4</option>
    <option id="e" value="">Grade 5</option>
    <option id="f" value="">Grade 6</option>
    <option id="g" value="">Grade 7</option>
    <option id="h" value="">Grade 8</option>
    <option id="i" value="">Grade 9</option>
    <option id="j" value="">Grade 10</option>                       
</select>

JS

 $(function(){
   $('#study-phase').change(function(){
     if ($("#study-phase").val() == "pri") {
        $("#a").css('display','block');
     }
   });

 });

Answer 4

Your JavaScript isn't valid.

Moreover, I think you want to one of the option in the second dropdown once you make change in the first.

You can build on this logic further

Here is a sample minimal code:

 function myFunction() { if (document.getElementById("study-phase").value == "pri") document.getElementById("study-year").value = "aa"; }; 

 <select name="study-phase" onchange="myFunction()" id="study-phase" class="sp-input"> <option value=""></option> <option id="pri" value="pri">Primary</option> <option id="pre" value="pre">Prep</option> <option id="sec" value="sec">Secondary</option> </select> <select name="study-year" id="study-year" class="sp-input"> <option value=""></option> <option id="a" value="aa">Grade 1</option> <option id="b" value="">Grade 2</option> <option id="c" value="">Grade 3</option> <option id="d" value="">Grade 4</option> <option id="e" value="">Grade 5</option> <option id="f" value="">Grade 6</option> <option id="g" value="">Grade 7</option> <option id="h" value="">Grade 8</option> <option id="i" value="">Grade 9</option> <option id="j" value="">Grade 10</option> </select> 

Answer 5

You can do something like this instead:

 $(document).ready(function() { $("#study-phase").on("change", function() { if (document.getElementById("study-phase").value === "pri") { $('option#a').show(); } }); }); 

 #a, #b, #c, #d, #f, #g, #h, #j, #k, #e, #i { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select name="study-phase" id="study-phase" class="sp-input"> <option value=""></option> <option id="pri" value="pri">Primary</option> <option id="pre" value="pre">Prep</option> <option id="sec" value="sec">Secondary</option> </select> <select name="study-year" id="study-year" class="sp-input"> <option value=""></option> <option id="a" value="aa">Grade 1</option> <option id="b" value="">Grade 2</option> <option id="c" value="">Grade 3</option> <option id="d" value="">Grade 4</option> <option id="e" value="">Grade 5</option> <option id="f" value="">Grade 6</option> <option id="g" value="">Grade 7</option> <option id="h" value="">Grade 8</option> <option id="i" value="">Grade 9</option> <option id="j" value="">Grade 10</option> </select> 

Answer 6

You need to define the function before calling it,

For example, in the first select (example 1) im calling a function that isn't defined yet and nothing happens (see console for error)

in the second select (example 2) i define it first then call it.

This makes for a messy html layout with random scripts in it, so instead, you can use jquery to listen for the event (example 3).

$('.myselect').change(function(){})

Examples: https://jsfiddle.net/hbmrktbj/

Answer 7

To done this jquery will be more efficient so you just need to do some thing like this:-

1.Remove onchange="myFunction()" form your select

2.Add this code on your script:-

 $('#study-phase').on('change',function(){
 if ($(this).val() == "pri") {
    $("#a")css('display','block');
 }});

It will work fine

Answer 8

I guess what you want is that when you select the value pri in the first select the second take the value aa. As you use jquery I'll give you an example.

 $( document ).ready(function() {
  $("#study-phase").change(function(){
  if($(this).val() === "pri")
    {
       $("#study-year").val("aa");
    }
  });
})

https://codepen.io/anon/pen/VWLaqv