onchange =“”在選擇標記中不起作用

Question

我有兩個選擇標簽。 他們的ID是“研究階段”和“研究年份”。 我想在學習階段的價值時處理CSS代碼。

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";
   }
});

運行代碼后，我不希望啟動的CSS代碼。 這是什么問題？

Answer 1

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

給出錯誤

Uncaught SyntaxError: Unexpected token (

另外，如果您按以下方式修改代碼，則可以正常工作，因為它是vanillaJs，因此不需要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";
    }}

只需這樣聲明您的函數。 並添加console.log以確保該功能是否在此更改之后被稱為“ onchange”。

Answer 3

嘗試使用.change()事件：

的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

您的JavaScript無效。

而且，我認為一旦在第一個下拉列表中進行更改，您便希望在第二個下拉列表中選擇一個選項。

您可以進一步建立這種邏輯

這是一個示例最小代碼：

 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

您可以改為執行以下操作：

 $(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

您需要先定義函數，然后再調用它，

例如，在第一個選擇（示例1）中，im調用了一個尚未定義的函數，並且什么也沒有發生（請參見控制台以獲取錯誤）

在第二個選擇（示例2）中，我先定義它，然后調用它。

這將導致雜亂的html布局中包含隨機腳本，因此，您可以使用jquery監聽事件（示例3）。

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

范例： https ： //jsfiddle.net/hbmrktbj/

Answer 7

要做到這一點，jQuery將更加高效，因此您只需要執行以下操作即可：-

1.從您的選擇中刪除onchange =“ myFunction（）”

2.將此代碼添加到腳本中：

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

會很好的

Answer 8

我想您想要的是，當您在第一個中選擇值pri時，第二個選擇值aa。 當您使用jquery時，我將舉一個例子。

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

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