无法显示文本onchange选项
[英]cannot display text onchange select option
问题描述
I have 1 set of <select><option> which is if I select 1 option by it value, it will display some text in <div> . 
我有一组<select><option> ，如果我按它选择1个选项，它将在<div>显示一些文本。
This is my code 这是我的代码
$(document).ready(function() { $('#selectcom').change(function() { opt = $(this).val(); if (opt == "comp_id") { $('#new_text').html('Varchar'); $('#size_row').html('20'); } else if (opt == "comp_name") { $('#new_text').html('Varchar'); $('#size_row').html('20'); } }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <tr> <td> <select class="selectField" onChange="" id="selectcom"> <option value="">-- Select Field --</option> <option value="comp_id">comp_id</option> <option value="comp_name">comp_name</option> </select> </td> <td id="data_row"> <div id="new_text"></div> </td> <td id="size_row"> <div id="size_row"></div> </td> </tr>
The problem is I cannot display any output either varchar text or 20 text with this code. 问题是我无法使用此代码显示varchar文本或20文本的任何输出。 Anyone please help me. 有人请帮助我。 Thank you.. 谢谢..
3 个解决方案
解决方案1
1 2017-10-20 06:51:18
It works. 有用。 I would suspect that you haven't referenced jQuery before your script block/file. 我怀疑你在脚本块/文件之前没有引用jQuery。 Check the developer's console. 检查开发人员的控制台。 Does it display something like: 它是否显示如下内容：
Uncaught ReferenceError: $ is not defined
Solution: Make sure your jQuery file is loaded before your script block/file. 解决方案：确保在脚本块/文件之前加载了jQuery文件。
Like: 喜欢：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="your-jsfile.js" type="text/javascript"></script>
Not like: 不喜欢：
<script src="your-jsfile.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
$(document).ready(function() { $('#selectcom').change(function() { opt = $(this).val(); if (opt == "comp_id") { $('#new_text').html('Varchar'); $('#size_row').html('20'); } else if (opt == "comp_name") { $('#new_text').html('Varchar'); $('#size_row').html('20'); } }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <tr> <td> <select class="selectField" onChange="" id="selectcom"> <option value="">-- Select Field --</option> <option value="comp_id">comp_id</option> <option value="comp_name">comp_name</option> </select> </td> <td id="data_row"> <div id="new_text"></div> </td> <td id="size_row"> <div id="size_row"></div> </td> </tr>
Also, I recommend using a switch statement. 另外，我建议使用switch语句。 I don't know about performance, but in my opinion, it improves readability. 我不了解性能，但在我看来，它提高了可读性。
$(document).ready(function() { $('#selectcom').change(function() { opt = $(this).val(); switch (opt) { case "comp_id": $('#new_text').html('Varchar'); $('#size_row').html('20'); break; case "comp_name": $('#new_text').html('Varchar'); $('#size_row').html('20'); break; } }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <tr> <td> <select class="selectField" onChange="" id="selectcom"> <option value="">-- Select Field --</option> <option value="comp_id">comp_id</option> <option value="comp_name">comp_name</option> </select> </td> <td id="data_row"> <div id="new_text"></div> </td> <td id="size_row"> <div id="size_row"></div> </td> </tr>
解决方案2
1 2017-10-20 06:52:10
First check console if you are getting some error due to other script also remove onChange="" if you are using direct jquery on change function, or use below approach. 首先检查控制台，如果由于其他脚本而导致某些错误，如果您在更改函数上使用直接jquery，则使用onChange =“”，或使用以下方法。
<tr>
<td>
<select class="selectField" onChange="changeMyValue(this.value)" id="selectcom">
<option value="">-- Select Field --</option>
<option value="comp_id">comp_id</option>
<option value="comp_name">comp_name</option>
</select>
</td>
<td id="data_row"><div id="new_text"></div></td>
<td id="size_row"><div id="size_row"></div></td>
</tr>
function changeMyValue(opt) {
if (opt=="comp_id")
{
$('#new_text').html('Varchar');
$('#size_row').html('20');
}
else if (opt == "comp_name")
{
$('#new_text').html('Varchar');
$('#size_row').html('20');
}
}
解决方案3
1 已采纳 2017-10-20 06:55:34
No enough information; 没有足够的信息; yet try to make sure you included jQuery reference in : 然后尝试确保您包含jQuery引用：
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
In case you did that , as I can see from jsfiddle. 如果你这样做，我可以从jsfiddle看到。 I suspect the css is showing the output in white...try to show some css code. 我怀疑css以白色显示输出...尝试显示一些css代码。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.