Question

我正在尝试获取一个下拉菜单，根据所选选项的值设置/更改div上的类。除了IE7和8之外，这在我的所有主浏览器中都能正常工作。任何想法我做错了什么？

<html>
<head>
<script type="text/javascript" src="/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
  $(function() {
    $('#outerwrapper').find('select').change(function () {
      var str1 = "";
      $("select option:selected").each(function () {
      str1 = $(this).attr('value');
    });
    $("#swatch").removeClass().addClass('mycssclass_' + str1);
  })
  .change();
});
</script>
</head>
<body>
<div id="outerwrapper">
  <form action="/" method="POST" name="test">
    Choose: 
    <select id="in_clr" name="clr"><!-- By choosing an option from this list... -->
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <div id="swatch"><!-- I want jQuery to add a CSS class of mycssclass_1 (or 2 or 3) to this DIV -->
    </div>
  </form>
</div>
</body>
</html>

我尝试将 .change 替换为 .live（“更改”，，但这似乎没有任何区别。

Answer 1

将您的选择器从：$('#outerwrapper').find('select')更改为：$('#in_clr')

根据我的经验，DOM遍历表单元素在IE中可能很奇怪。无论如何你都不需要额外的链接。

Answer 2

我相信你可以将你的编码简化为：

$(document).ready(function(){
    $('#outerwrapper select').change(function() {
        $("#swatch").removeClass().addClass('mycssclass_' + $(this).val());
     });
});

Jsfiddle

.ready仅在元素可用时运行（如果您使用的是ajax-y，则可以更改为使用.live。

请注意，这会将更改事件绑定到所有选择元素 - 如果您只想定位该特定选择，请使用#in_clr。

至于为什么IE失败，可能是你的:selected电话或.attr()因为IE对属性和属性非常挑剔。

SELECT上的jQuery不能在IE中运行，但适用于所有其他浏览器

2 个答案: