javascript jquery 更改不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17447706/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery change doesn't work
提问by Radu Vlad
When a [name="tip"]has the first value, display a specific element, otherwise it would display another element.
当 a[name="tip"]为第一个值时，显示特定元素，否则将显示另一个元素。
Both elements have the display:noneproperty. When I load the page I check the select value and fadeIn the desired element automatically.
两个元素都有display:none属性。当我加载页面时，我会自动检查选择值并淡入所需元素。
Everything works fine except when I try to change the selected option: nothing happens. I added both javascript onchangeto that item and jquery .change()and nothing happens. Can you tell me why?
一切正常，除非我尝试更改所选选项：没有任何反应。我将 javascript 添加onchange到该项目和 jquery 中.change()，但没有任何反应。你能告诉我为什么吗？
<form id="fm-account-properties-tab" method="POST">
<table width="300px" style="margin-top:10px;" align="center" >
<tr>
<td align="left">
<select class="easyui-combobox" name="tip" style="width:200px;" class="easyui-validatebox" required="true" onchange="changeType();">
<option value="l1">l1</option>
<option value="l2">l2</option>
<script>
$(document).ready(function(){
$('[name="tip"]').val('<?php echo $a['tip'];?>');
});
</script>
</select>
</td>
</tr>
<tr id="l1" style="display:none">
<td align="left">
<select class="easyui-combobox" name="l1" style="width:200px;" class="easyui-validatebox" required="true">
</select>
</td>
</tr>
<tr id="l2" style="display:none">
<td align="left">
<select class="easyui-combobox" name="l2" style="width:200px;" class="easyui-validatebox">
</select>
</td>
</tr>
</table>
</form>
<script>
function changeType()
{
if($('[name="tip"]').val()=='l1')
{
$('#l1').fadeIn();
$('#l2').hide();
}
else
{
$('#l2').fadeIn();
$('#l1').hide();
}
}
$(document).ready( function () {
changeType();
$('[name="tip"]').change(function(){ alert('1');});//it never alerts me
});
回答by Stanley Amos
May be you should use js error eventto figure out the error in that code. E.g, <script> try
{....all your codes here...}
catch(err)
{alert("THE ERRor" + err.message);} </script>. These code will alert your error and the exact point it occurs. Good luck!
可能你应该js error event用来找出该代码中的错误。例如，<script> try
{....all your codes here...}
catch(err)
{alert("THE ERRor" + err.message);} </script>。这些代码将提醒您的错误及其发生的确切点。祝你好运！
回答by Ricola3D
First, you should try to add a
首先，您应该尝试添加一个
console.log("It works");
or a
或
alert("It works")
in your method so you know if it is actualy called.
在您的方法中，以便您知道它是否被实际调用。
Then I think the issue may come from FadeIn() only works on elements with css {display: none} and visibility different of 'hidden', so are you sure your elements are ? In doubt, you may replace
然后我认为问题可能来自 FadeIn() 仅适用于具有 css {display: none} 和可见性不同的“隐藏”的元素，所以你确定你的元素是？有疑问，您可以更换
.fadeIn();
by
经过
.css('visibility','visible').hide().fadeIn(); // hide() does the same as display: none
Then please let me know if you have more information after doing that.
那么请让我知道您在这样做之后是否有更多信息。
回答by JP Hellemons
use .onfor newer jQuery versions (jQuery > 1.7.x reference)
使用.on较新版本的jQuery（jQuery的> 1.7.x参考）
function changeType() {
if ($('[name="tip"]').val() == '___') {
$('#1').fadeIn();
$('#2').hide();
} else {
$('#2').fadeIn();
$('#1').hide();
}
}
$(document).ready(function () {
changeType();
$('select[name="tip"]').on('change', function() {
changeType();
});
});
you have a double class attribute on your select.
你的选择有一个双类属性。
here is a working sample http://jsfiddle.net/tvhKH/
这是一个工作示例http://jsfiddle.net/tvhKH/
