的選擇更改事件拋出一個 「jQuery是不是一個函數」 錯誤

Question

JS代碼：

function banChanged(){ 
    $("#BanReason").on("change",function(){ 
     if($(this).val() == "scrammer") 
      $("#BanLength").val("1week"); 
    }); 
} 

HTML代碼：

<select id="BanReason" onchange="banChanged()"> 
    <option value="hack">Hack</option> 
    <option value="badlang">Bad Language</option> 
    <option value="scrammer">Scrammer</option> 
</select> 

<select id="BanLength"> 
    <option value="1day">1 Day</option> 
    <option value="2days">3 Days</option> 
    <option value="1week">1 Week</option> 
</select> 

JavaScript是一種不同的位置。當我點擊選擇更改值時，我得到這個「不是函數」錯誤。腳本內聯工作，但需要將其加載到<script type="text/javascript" src="./test.js"></script>標記中。

任何人都可以幫助我嗎？

Answer 1

$(document).ready(function() { 
 
    $("#BanReason").on("change", function() { 
 
    if ($(this).val() == "scrammer") 
 
     $("#BanLength").val("1week"); 
 
    }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<select id="BanReason"> 
 
    <option value="hack">Hack</option> 
 
    <option value="badlang">Bad Language</option> 
 
    <option value="scrammer">Scrammer</option> 
 
</select> 
 

 
<select id="BanLength"> 
 
    <option value="1day">1 Day</option> 
 
    <option value="2days">3 Days</option> 
 
    <option value="1week">1 Week</option> 
 
</select>

同時確保jQuery是你的腳本之前加載，並且路徑到你的腳本是正確的。 ./test.js表示您的腳本與.html文件位於同一文件夾中。

Answer 2

刪除由onchange()附加的內聯事件，因爲您已經在js代碼中附加了change事件，也刪除了函數聲明，只保留ready函數包裝的內容，請查看下面的示例。

希望這會有所幫助。

$(function(){ 
 
    $("#BanReason").on("change",function(){ 
 
    if($(this).val() === "scrammer") 
 
     $("#BanLength").val("1week"); 
 
    }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="BanReason"> 
 
    <option value="hack">Hack</option> 
 
    <option value="badlang">Bad Language</option> 
 
    <option value="scrammer">Scrammer</option> 
 
</select> 
 

 
<select id="BanLength"> 
 
    <option value="1day">1 Day</option> 
 
    <option value="2days">3 Days</option> 
 
    <option value="1week">1 Week</option> 
 
</select>