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

I'm having some doubt, I'm having select option and on that select option I'm having different options when I click on that it will load that HTML file and it works well for two options but for third option its not working good, while clicking on the second option it gives an error like "Uncaught TypeError: Cannot read property 'is' of undefined"

我有一些疑问,我有选择选项和选择选项我有不同的选项,当我点击它将加载该HTML文件,它适用于两个选项,但第三选项,它不能正常工作,当点击第二个选项时,它会给出一个错误,如“未捕获的TypeError:无法读取属性”是“未定义”

Here this is my code

这是我的代码

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

3 个解决方案

#1

I have added a plunker, check it out

我添加了一个plunker,检查出来

Plunker link

Things looks fine for me

事情对我来说很好

$(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');
    }
  });
});

#2

Seems like one of your values, with a property key of 'is' is undefined.

看起来像您的一个值,属性键'is'未定义。

Candidates are:

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

and

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

Are you sure an element with an id of "a" or "b" exists on the page? In order words, what do you get when you type $('#a') or $('#b') in the web console?

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

Based on the HTML provided, it seems that the options you provided have only name and value attributes set, however no id.

根据提供的HTML,您提供的选项似乎只设置了名称和值属性,但没有ID。

Maybe we can try to change:

也许我们可以尝试改变:

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

#3

Option B is not an ID/#. It’s written as value=b which causes it undefined. The syntax is probably causing it to be an error

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

#1