onchange =「」在選擇標記中不起作用

我有兩個選擇標記。他們的ID是「研究階段」和「研究年」。我想當學習階段的價值來處理一個CSS代碼。onchange =「」在選擇標記中不起作用

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：

而且之後運行的代碼，我想不啓動CSS代碼。這裏有什麼問題？使用.change()事件

來源

2017-06-06 Ameer Ahmed

你應該看到在瀏覽器控制檯中的語法錯誤。 – Pointy

不僅僅是一個解決方案 - 我建議將樣式移動到樣式表中，如果這不是一個選項，至少要把它放在正確的位置（頭標籤）。也沒有內聯js！ – ThisGuyHasTwoThumbs

@Pointy 瀏覽器控制檯中沒有語法錯誤。 –

嘗試：

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>

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

});

來源

2017-06-06 14:09:28 Zenoo

目前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>

來源

2017-06-06 14:10:47

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

來源

2017-06-06 14:11:01

你可以做這樣的事情，而不是：

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

來源

2017-06-06 14:13:30 reinierkors

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」或不是，這是更改後。

來源

2017-06-06 14:16:49

你需要調用它之前定義的功能，

例如，在第一選擇（例如1）即時調用一個尚未定義，什麼都不會發生（見錯誤控制檯）

功能

在第二個選擇（例2）我首先定義它然後調用它。

這使得在其中使用隨機腳本的混亂html佈局，所以可以使用jquery來監聽事件（示例3）。

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

例子：https://jsfiddle.net/hbmrktbj/

來源

2017-06-06 14:17:09 Brad

要完成這個jQuery的效率會更高，所以你只需要做一些事情是這樣的： -

1.去除的onchange = 「myFunction的（）」的形成選擇

2.增加對腳本的代碼： -

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

它會正常工作

來源

2017-06-06 14:18:25

我想你想要的是，當你在第一個選擇值pri選擇第二個取值aa。當你使用jQuery時，我會給你一個例子。

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

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

來源

2017-06-06 14:23:06 maikelm

還有其他方法 – maikelm

onchange =「」在選擇標記中不起作用

回答

相關問題