jquery设置select的option属性在firefox中不起作用？

sjt000 2011-03-05 03:47:17 



<div id="div1">

<select>

<option value="1" >1</option>

<option value="2" selected="selected" >2</option>

<option value="3" >3</option>

</select>

</div>

<div id="div2">



</div>

<input id="btn1" value="btn" onclick="copySelect" />





function copySelect()

{

var template=$("#div1").find("select").clone

template.find("option").removeAttr("selected");

template.find("option[value='3']").attr("selected","true");

$("#div2").html(template.html);

}


发现以上操作在IE中是正常的，点击按扭时，在div2中的select默认选中是3
但是在firefox中attr("selected","true");没有效果，这是为什么呢？
...全文
703 21 打赏 收藏 转发到动态 举报
写回复
用AI写文章
21 条回复
切换为时间正序
请发表友善的回复…
发表回复
happy664618843 2011-03-05
  • 打赏
  • 举报
 回复 
$("#select1").find("option[value=3]").attr("selected",true)
huangwenquan123 2011-03-05
  • 打赏
  • 举报
 回复
template.find("option[value='3']")[0].setAttribute("selected","selected");
这句的[0]是把它转为dom元素，然后进行设置属性
sjt000 2011-03-05
  • 打赏
  • 举报
 回复
[Quote=引用 16 楼 huangwenquan123 的回复:]
HTML code

<!--喔 你是说在ff下弹出那个html()，3没有selected这个属性？下面已经改了，ie ff都有那个属性显示-->
<html>
<head id="Head1" runat="server">
<title>无标题页</title>
<script type="text/javascript" src="jquery-1.3.2.mi……
[/Quote]

下面还有关于这个问题的其它区的帖子，进来留个言，我好结贴。
http://topic.csdn.net/u/20110305/15/36dd0405-cfc3-4fb4-965c-277e378e0f08.html

http://topic.csdn.net/u/20110305/15/efc63f49-a231-4ce6-9f7a-0a1907399ace.html
huangwenquan123 2011-03-05
  • 打赏
  • 举报
 回复
[Quote=引用 17 楼 sjt000 的回复:]
引用 16 楼 huangwenquan123 的回复:
HTML code

<!--喔 你是说在ff下弹出那个html()，3没有selected这个属性？下面已经改了，ie ff都有那个属性显示-->
<html>
<head id="Head1" runat="server">
<title>无标题页</title>
<script type="text/javascript……
[/Quote]虽说jquery兼容很好，不过也不可能做得完美，js如果只对dom操作的话各个浏览器是兼容的
sjt000 2011-03-05
  • 打赏
  • 举报
 回复
[Quote=引用 16 楼 huangwenquan123 的回复:]
HTML code

<!--喔 你是说在ff下弹出那个html()，3没有selected这个属性？下面已经改了，ie ff都有那个属性显示-->
<html>
<head id="Head1" runat="server">
<title>无标题页</title>
<script type="text/javascript" src="jquery-1.3.2.mi……
[/Quote]
嗯嗯
就是这样，我想知道原因，能给讲讲原来写法不能生效的原因吗？

huangwenquan123 2011-03-05
  • 打赏
  • 举报
 回复 


<!--喔 你是说在ff下弹出那个html()，3没有selected这个属性？下面已经改了，ie ff都有那个属性显示-->

<html>

<head id="Head1" runat="server">

    <title>无标题页</title>

    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>

    <script>

        function copySelect() {

            var template = $("#div1").find("select").clone();

            template.find("option").removeAttr("selected");

            //template.find("option[value='3']").attr("selected", "selected");

            template.find("option[value='3']")[0].setAttribute("selected","selected");

            alert(template.html());

            $("#div2").html(template);

        }

    </script>

</head>

<body>

    <div id="div1">

        <select>

            <option value="1">1</option>

            <option value="2" selected="selected">2</option>

            <option value="3">3</option>

        </select>

    </div>

    <div id="div2">

    </div>

    <input id="Button1" type="button" value="button" onclick="copySelect()"/>

</body>

</html>
sjt000 2011-03-05
  • 打赏
  • 举报
 回复
[Quote=引用 14 楼 huangwenquan123 的回复:]
HTML code
<OPTION value=1>1</OPTION> <OPTION value=2>2</OPTION> <OPTION value=3 selected>3</OPTION>


JScript code

/*输出之后显示上面那个，有什么问题？还是你是说
template.find("option:selected").removeAttr("select……
[/Quote]



function copySelect() {

            var template = $("#div1").find("select").clone();



            template.find("option").removeAttr("selected");//这句没必要加，因为你指定了另外一个为 选中状态了，select只能有一个为选中状态



            template.find("option[value='3']").attr("selected", "true");



            alert(template.html());

            

        }






<div id="div1">

        <select>

            <option value="1">1</option>

            <option value="2" selected="selected">2</option>

            <option value="3">3</option>

        </select>

    </div>

    <div id="div2">

    </div>

    <input id="btn1" value="btn" onclick="copySelect();" />


把JS换成上面的，然后在firefox中运行下，看alert出的内容，selected没有出现，
（因为我不是要当时插入dom树，而是先保存它）
huangwenquan123 2011-03-05
  • 打赏
  • 举报
 回复 
 <OPTION value=1>1</OPTION> <OPTION value=2>2</OPTION> <OPTION value=3 selected>3</OPTION>



/*输出之后显示上面那个，有什么问题？还是你是说

template.find("option:selected").removeAttr("selected");这句效果没去掉？

*/

    <script type="text/javascript">

        function copySelect()

        {

            var template=$("#div1").find("select").clone();

            template.find("option:selected").removeAttr("selected");

            template.find("option[value='3']").attr("selected","true");

            $("#div2").html(template);

            document.write(template.html());

        }

    </script>
sjt000 2011-03-05
  • 打赏
  • 举报
 回复
[Quote=引用 12 楼 huangwenquan123 的回复:]
HTML code

<!--还是不太明白lz的意思，我就直接拿你的代码来改了。ie ff都运行可以-->
<html>
<head id="Head1" runat="server">
<title>无标题页</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
……
[/Quote]

谢谢这位兄弟，在你的代码的提示下，我好像找到了一点线索。
1.
//template.find("option").removeAttr("selected");//这句没必要加，因为你指定了另外一个为 选中状态了，select只能有一个为选中状态
这句不能去除，因为这是个demo,而在实际环境中是一段比较复杂的Dom树，其中有多个select,而除了特定的select,其它的必需清除选中状态，
2. 你的代码确实可以，是我的例子弄的不好，你把$("#div2").html(template);
换成alert(template.html());就知道我的疑惑了，
huangwenquan123 2011-03-05
  • 打赏
  • 举报
 回复 


<!--还是不太明白lz的意思，我就直接拿你的代码来改了。ie ff都运行可以-->

<html>

<head id="Head1" runat="server">

    <title>无标题页</title>

    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>

    <script type="text/javascript">

        function copySelect()

        {

            var template=$("#div1").find("select").clone();

            //template.find("option").removeAttr("selected");//这句没必要加，因为你指定了另外一个为 选中状态了，select只能有一个为选中状态

            template.find("option[value='3']").attr("selected","true");

            $("#div2").html(template);

        }

    </script>

</head>

<body>

    <div id="div1">

        <select>

            <option value="1">1</option>

            <option value="2" selected="selected">2</option>

            <option value="3">3</option>

        </select>

    </div>

    <div id="div2">

    </div>

    <input id="Button1" type="button" value="button" onclick="copySelect()"/>

</body>

</html>
sjt000 2011-03-05
  • 打赏
  • 举报
 回复
[Quote=引用 9 楼 showenxxx 的回复:]
既然楼主说了要求，实现方法有很多
先上代码
http://jsfiddle.net/pDGZR/
[/Quote]

谢谢这位兄弟，可以是我还没说明白我的要求，因为添加操作不是当前进行的，
它的逻辑是，
1 先把拷贝的select选中项选中状态删除，
2 然后再改变成另一个选中项
3 再把2步的结果存储到另一个对象中，
4 在某些条件触发时，再根据某些条件动态生成它的ID，再插入页面中的某个位置

因为它在当前交不能确定ID，和未插入页面，不能进行展现到页面后再修改其选中值的操作。
我希望能在存储时用
template.find("option[value='3']").attr("selected","true");
将其选中状态设置好，然后保存到某地（还未插入）
但上句在IE中可以正常使用，但在Firefox中不行，
实在想不通原因，希望大家帮忙
huangwenquan123 2011-03-05
  • 打赏
  • 举报
 回复 
<html>

<head id="Head1" runat="server">

    <title>无标题页</title>

    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function(){

            $("#Button1").click(function(){

                var clone = $("#Select1").clone();

                $("#Select1 option").eq(2).attr("selected",true);

                $("body").append(clone);

            })

        })

    </script>

</head>

<body>

    <select id="Select1">

        <option value="1">1</option>

        <option value="2">2</option>

        <option value="3">3</option>

    </select>

    <input id="Button1" type="button" value="button" />

</body>

</html>
showenxxx 2011-03-05
  • 打赏
  • 举报
 回复
既然楼主说了要求，实现方法有很多
先上代码
http://jsfiddle.net/pDGZR/
sjt000 2011-03-05
  • 打赏
  • 举报
 回复
[Quote=引用 7 楼 huangwenquan123 的回复:]
HTML code

<!--ie ff都有效-->
<head runat="server">
<title>无标题页</title>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(……
[/Quote]

要求是，复制一个原select,删除其中原option的选中状态，更改为另一个option为选中状态，
然后再添加到页面上~
huangwenquan123 2011-03-05
  • 打赏
  • 举报
 回复 


<!--ie ff都有效-->

<head runat="server">

    <title>无标题页</title>

    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function(){

            $("#Button1").click(function(){

                $("#Select1 option").eq(2).attr("selected",true);

            })

        })

    </script>

</head>

<body>

    <select id="Select1">

        <option value="1">1</option>

        <option value="2">2</option>

        <option value="3">3</option>

    </select>

    <input id="Button1" type="button" value="button" />

</body>

</html>
zell419 2011-03-05
  • 打赏
  • 举报
 回复 


var template=$("#div1").find("select").clone();

template.find("option").removeAttr("selected");

template.find("option[value='3']").attr("selected","true");

$("#div2").html(template);


分多 ？一个这东西到处发 。
porschev 2011-03-05
  • 打赏
  • 举报
 回复

你把jquery这个选择项写复杂了。。

直接给select一个ID。。。

不用去循环里面的项。。。。直接把要选中项的value赋给这个select的val
wuyq11 2011-03-05
  • 打赏
  • 举报
 回复
$("xx").attr('selected',true);
wuyq11 2011-03-05
  • 打赏
  • 举报
 回复
$('#selectid').val('1');
porschev 2011-03-05
  • 打赏
  • 举报
 回复


不用这些设置吧。。。。直接给select标签一个名字，比如：selAbc

选中哪一项就是：

$("#selAbc").val(“这里填要选中项的value值”);
加载更多回复（1）
动态给select添加option失败的问题原因及解决
做作业的时候需要给给一个select标签动态添加option，但却总是不成功，刚开始我是这样写的： $(#day).options.append(new Option(i,i)); 然后发现并没有变化，查资料后才发现，如果要用jQuery给select标签动态添加...
jQuery选中select控件 无法设置selected的解决方法
select 控件的 option用jQuery动态添加，然后选中某项时，IE6不能执行（火狐没问题），用try{}catch(err){alert(err.description);}提示为“无法设置selected属性 未指明的错误”
jQuery入门到精通
您将学到什么 在本教程中，您将通过教程以及许多在线实例，学到如何通过使用 jQuery 应用 JavaScript 效果。 jQuery 是一个“写的更少，但做的更多”的轻量级 JavaScript 库。 基本上，您将学习到如何选取 HTML ...
jQuery Select下拉框操作小结(推荐)
jQuery获取Select元素，并选择的Text和Value: 1. $(“#select_id”).change(function(){//code…}); //为Select添加事件，当选择其中一项时触发 2. var checkText=$(“#select_id”).find(“option:selected”)....
jquery Firefox3.5中操作select的问题
我也是一直是这么用，不过最近安装了FF3.5正式版，发现这种方法在它下面得不到值，就去看jquery的帮助文档，在文档中对select选中的引用是用如下方法： 代码如下:$(“#customer option:selected”).val();...
.NET社区

62,046

社区成员

669,048

社区内容

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见，支持健康理性的辩论和互动，反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧

+ 用AI写文章