Вы поместили тег сценария, содержащий ваш код, перед разметкой HTML ... Таким образом, элементы, на которые нацелены селекторы select[name="dropdown"]
и #div2
, еще не существуют, когда код анализируется.
Итак, выможете поместить тег скрипта, содержащий ваш код, в конец файла, чуть выше </body>
или , оберните ваш код обработчиком готов к документу следующим образом:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){ // Add this
$('select[name="dropdown"]').change(function(){
if ($(this).val() == "2"){
$.ajax({
url: "demo_test2.txt",
success: function(result){
$("#div2").html(result);
},
error: function(request,status,error){
console.log(error);
}
});
});
}); // And this
</script>
</head>
<body>
<div id="div2"><h2>John</h2></div>
<select name="dropdown">
<option id="button" value="1">English</option>
<option id="button2" value="2">Dutch</option>
</select>
</body>
</html>