无法在单个页面上的div标签中加载不同的HTML

Question

我有一些疑问，我有一个选择选项，并在该选择选项上设有不同的选项。当我点击它时，它会加载HTML文件，对于前两个选项很有效，但对于第三个选项效果不佳。当我点击第二个选项时，它会出现错误，如下所示：

"Uncaught TypeError: Cannot read property 'is' of undefined"

这是我的代码：

$(function() {
  $('#type').change(function() {
    if ($('#type').val() == 'a') {
      
        $('#loadCheckHere').load('./templates/a.html');
      }
    } else if ($('#type').val() == 'b') {
 
        $('#loadCheckHere').load('./templates/b.html');
      
    } else {
      alert('select properly');
      $('#loadCheckHere').load('./templates/c.html');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="type" id="type" style="margin-left:57px;width:180px;">
 <option name="" value="">Select Asset Recovery</option>
 <option name="a" value="a">Add A</option>
 <option name="b" value="b">Add B</option>
 <option name="c" value="c">Add C</option>
</select>

<!--This is div tag,Here only I'm loading different html-->
<div id="loadCheckHere" style="background-color:white"></div>

- Ashika

---

$('#a')和$('#b')在哪里？我在你的代码中没有看到任何具有这些ID的元素。 - Plotisateur

在这种情况下，应该是 $('option[name=a]') 和 $('option[name=b]')。我认为 .is() 上的未定义错误只来自于此。 - Plotisateur

@Plotisateur 因为你的解决方案，我点了个赞。是的，没有id为a或b的元素，应该是<option id="a" value="a">添加打印机</option>或者使用你的建议。 - Aria

@Ashika，你为什么要检查选项 a 或 b 的可见性？是想通过选择相关选项来加载 a.html 或 b.html 吗？ - Aria

Answer 1

我已经添加了一个 Plunker，你可以查看一下

Plunker 链接

对我来说看起来没问题

$(function() {
  $('#type').change(function() {
    if ($('#type').val() == 'a') {

      $('#loadCheckHere').load('a.html');

    } else if ($('#type').val() == 'b') {

      $('#loadCheckHere').load('b.html');

    } else {
      //alert('select properly');
      $('#loadCheckHere').load('c.html');
    }
  });
});

- Pandiyan Cool

---

谢谢，它运行得很好。但是我正在使用Kendo UI框架，所以我正在尝试在那个页面上使用它，这就是为什么它会抛出那个错误的原因。 - Ashika

Answer 2

选项B不是一个ID/#。它被写成value=b，导致它未定义。语法可能导致错误。

- N Ouk

---

@Ashika，你在使用哪个框架进行这个编辑的呢？ - N Ouk

我的代码正常工作，但我正在使用Kendo UI框架，因此在该框架中，我需要创建一个单独的HTML页面并需要访问它。我已经尝试过在jquery上进行操作，代码可以工作，但我无法做到这一点。当我尝试移动到其他页面时，它会不断抛出错误。 - Ashika

Answer 3

似乎你的一个属性键为“is”的值未定义。

候选项如下：

var isPrinterVisible = $('#a').is(':visible');

并且

var isPcVisible = $('#b').is(':visible');

你确定页面上存在一个id为“a”或“b”的元素吗？换句话说，当你在Web控制台中键入$('#a')或$('#b')时会得到什么？

根据提供的HTML，似乎所提供的选项只设置了name和value属性，但没有id。

也许我们可以尝试改变：

 <option name="a" value="a">Add Printer</option>
 <option name="b" value="b">Add PC</option>
 <option name="c" value="c">Store Deinstall</option>

to:

<option id="a" name="a" value="a">Add Printer</option>
<option id="b" name="b" value="b">Add PC</option>
<option id="c" name="c" value="c">Store Deinstall</option>

- Ninja

---

我的问题是，我们能否在单个页面上更改或加载不同的HTML？ - Ashika

@Ashika 看起来你已经解决了你的问题！如果你觉得我的回答有帮助，请记得点赞哦。祝编程愉快！ - Ninja