jQuery hide（）; 和show（）; Internet Explorer中的问题
[英]jQuery hide(); and show(); issue in Internet Explorer
问题描述
I've been wrestling with Internet Explorer for a few hours now and can't seem to figure out my problem. 
我已经在Internet Explorer上奋斗了几个小时，但似乎无法弄清我的问题。 I'm trying to achieve a simple "group option switcher" with jQuery show() and hide(). 我正在尝试使用jQuery show（）和hide（）实现一个简单的“组选项切换器”。
It's probably best if you look at my demo to see what I mean: http://softwaredb.org/test/jquery-multi-select.html 最好是看一下我的演示以了解我的意思： http : //softwaredb.org/test/jquery-multi-select.html
My code works in every browser except IE. 我的代码可在除IE之外的所有浏览器中使用。 My code is this... 我的代码是这个...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo - Jquery Multi Select box</title>
<style type="text/css">
select{width:200px;height:200px;}
select#boysnames, select#girlsnames{display:none;}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="wrapper" style="padding:50px 0 0 50px;">
<form>
<select multiple="multiple" id="theoptions">
<option value="boysnames">Boys Names</option>
<option value="girlsnames">Girls Names</option>
</select>
<select multiple="multiple" id="placeholder">
</select>
<select multiple="multiple" id="boysnames">
<option>John</option>
<option>David</option>
<option>Tom</option>
</select>
<select multiple="multiple" id="girlsnames">
<option>Jenny</option>
<option>Amanda</option>
<option>Sara</option>
</select>
</form>
</div> <!-- end #wrapper -->
<script type="text/javascript">
$('option[value="boysnames"]').click(function() {
$('select#placeholder, select#girlsnames').hide();
$('select#boysnames').show();
});
$('option[value="girlsnames"]').click(function() {
$('select#placeholder, select#boysnames').hide();
$('select#girlsnames').show();
});
</script>
</body>
</html>
My logic is... on click, hide all other select tags and show the one I'd like to see. 我的逻辑是...单击时，隐藏所有其他选择标签并显示我想看到的标签。 It seems to work fine, until I try in IE. 直到我尝试使用IE为止，它似乎都能正常工作。 Any ideas what I'm doing wrong? 有什么想法我做错了吗？ I'm very new to jquery (and javascript/programming in general) so forgive me if this is a dumb question. 我对jquery（和一般来说是javascript / programming）非常陌生，所以如果这是一个愚蠢的问题，请原谅我。
2 个解决方案
解决方案1
7 已采纳 2012-12-22 05:34:02
Instead of tracking clicks on the option level, track a change on the select level. 而不是跟踪选项级别的点击，而是跟踪选择级别的更改。
$('select#theoptions').change(function() {
$('#placeholder, #girlsnames').hide();
if($(this).val() == 'boysnames') {
$('#boysnames').show();
} else {
$('#girlsnames').show();
}
});
There are many ways to make your approach a little more intuitive, but this should get you going on the path that you're on 有很多方法可以使您的方法更加直观，但这应该可以让您走上正轨
解决方案2
1 2012-12-22 06:01:41
<script type="text/javascript">
$('#theoptions').click(function() {
if($(this).attr('value') == "boysnames")
{
$('select#placeholder, select#girlsnames').hide();
$('select#boysnames').show();
}
if($(this).attr('value') == "girlsnames")
{
$('select#placeholder, select#boysnames').hide();
$('select#girlsnames').show();
}
});
</script>
use this .. 用这个 ..
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.