Question

我创建了一个脚本，可以在jquery的帮助下用外部.txt文档中的文本替换html页面中的文本。但是以某种方式不起作用：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>
<script>
 $('select[name="dropdown"]').change(function(){
 if ($(this).val() == "2"){
    $.ajax({url: "demo_test2.txt", success: function(result){
        $("#div2").html(result);
    }});
 });
 </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>

Answer 1

您将包含代码的脚本标签放置在HTML标记之前...因此，解析代码时，选择器select[name="dropdown"]和#div2定位的元素尚不存在。

因此，您可以将包含代码的脚本标签放置在文件末尾的</body>上方或用document ready处理程序包装代码，如下所示：< / p>

<!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>

用选择菜单替换文本

1 个答案: