jQuery的val()方法更改似乎不会改变DOM

Question

执行 $("#someId").val("newValue") 不会改变 DOM -- 我可以通过 $("#someId").val() 获取该值，但是 DOM 中的元素仍然没有 value 属性。

如何设置输入组件的值并同时更改 DOM？

我正在使用 jQuery 1.5.1。

- Alex Ivasyuv

---

如果您正在使用Firebug，它存在一个关于更新DOM的错误，您必须单击窗口对象以刷新它 :) - Val

请提供原始文本以进行翻译。 - The_Butcher

@Val，我应该在哪里点击窗口对象？在DOM选项卡中吗？ - Alex Ivasyuv

检查我的答案，它应该更有意义。 - Val

Answer 1

.val()会改变DOM。例如：

$("#someId").val("newValue");

alert(document.getElementById('someId').value);

警报：“newValue”。

查看演示。

如果您想更改在表单重置中使用的默认值，请尝试以下操作：

$("#someId").attr("defaultValue", "newValue");

请查看演示。

- rsp

---

@Alex：请发布一个 jsFiddle 的示例，以证明你所说的。也许你没有看到最新的 DOM - 请看 Val 的评论。 - rsp

@rsp，在Web Inspector中也是一样的...你提供了适当的示例，但问题仍然存在...在任何浏览器中检查元素，都会显示没有"value"属性... - Alex Ivasyuv

@rsp：是的，这就是我感到困惑的原因……好吧，这里有一张截图http://img851.imageshack.us/img851/8295/screenshot20110308at338.png，请查看检查的元素，并发现没有“value”属性。Chrome，Mac OS X - Alex Ivasyuv

@Alex：你正在查看源HTML，而不是DOM。当你在Firefox中右键单击元素并选择“检查元素”时，请单击右下窗口中的DOM选项卡，并查找“value”属性。它在那里吗？ - rsp

看这个fiddle：http://jsfiddle.net/ykVxj/48/。outerHTML属性没有显示`value`的变化。我能得出结论，DOM没有更新，只是属性`value`被更新了。 - user

Answer 2

This

$("#someId").val("newValue")

将更改输入元素的值。

这个

$("#someId").attr("value","newValue")

将会更改value属性的值。

第二个例子可以帮助你写出元素。例如：

$("#someId").val("newValue")
$("#someId").attr("value","newValue")
write($("#someId").parent())

-将导致新值被呈现，而

$("#someId").val("newValue")
write($("#someId").parent())

-只会显示原始值。

- Bryn Lewis

Answer 3

答案 如果你正在使用firebug，它有一个关于更新dom的bug，你必须点击窗口对象来刷新它 :)

解释 @alex，我正在阅读下面的评论。在@rsp的回答中，你似乎将dom与html树混淆了。dom是一种类似于值列表的树形结构，用于跟踪值。是的，点击dom选项卡，或右键单击要检查的元素，然后在dom、值上进行检查，因为安全原因，防止除浏览器以外的任何其他东西更改其值或可能是因为firebug出错了，他们可能正在修复它 :)

- Val

Answer 4

阅读来自“rsp”答案和讨论：

您想更改HTML源代码，而不是DOM。

因此，请使用：

$('#YOUR_ID option[value="YOUR_VALUE"]').attr('selected', 'selected');

方法.val()不会改变HTML源代码。

Cheers. Stefano

- Stefano Vespucci