Javascript jQuery .attr('value', 'new_value') 不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5506937/
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 .attr('value', 'new_value') not working?
提问by BenM
I am trying to dynamically change the actual HTML valueattribute of an input using jQuery. Although using input.attr('value', 'myNewVal');works to change it visually, when I inspect the source using Developer Tools in Chrome, the HTML attribute hasn't changed.
我正在尝试value使用 jQuery动态更改输入的实际 HTML属性。尽管 usinginput.attr('value', 'myNewVal');可以在视觉上对其进行更改，但是当我使用 Chrome 中的开发人员工具检查源代码时，HTML 属性并没有改变。
Since I'm doing a check in some PHP later on to see if the input has its original value, I need a way of changing the actual HTML attribute, ideally in jQuery. Has anyone else encountered this annoying bug and do any of you guys know a workaround?
由于我稍后会检查一些 PHP 以查看输入是否具有其原始值，因此我需要一种更改实际 HTML 属性的方法，最好是在 jQuery 中。有没有其他人遇到过这个烦人的错误，你们中有人知道解决方法吗？
I've also tried with .val()and the same happens - the underlying HTML attribute is unchanged.
我也试过，.val()同样的事情发生了——底层的 HTML 属性没有改变。
回答by Kobi
attrshould work as well, specially since you do see it change, but try also to use val- it is better suited for changing values:
attr应该也可以工作，特别是因为您确实看到它发生了变化，但也尝试使用val- 它更适合更改值：
input.val('myNewVal');
Make sure notto use the "View Source"command, it reloads the page, or shows the page as it was loaded. Instead, use the DOM viewer - right click on the input element and choose "Inspect element". (This is the same as "Development tools"- Ctrl+Shift+Iin Chrome in Windows)
确保不要使用“查看源代码”命令，它会重新加载页面，或在加载页面时显示页面。相反，使用 DOM 查看器 - 右键单击输入元素并选择“检查元素”。（这是一样的“开发工具”- Ctrl+ Shift+I在Chrome在Windows中）
回答by Tim Down
Both attr()and val()deal exclusively with the valueproperty[update February 2014: this was true prior to jQuery 1.6 but is not true since the introduction of prop()in 1.6], not attribute. The valueattribute only specifies the initial value of the input. Once the actual text within the input has changed (either by user input or script), the value property and attribute operate entirely independently. In almost all cases, this doesn't matter, because it's almost always the current value that you want (and it's that value that is submitted to the server).
双方attr()并val()专门与处理value性能[更新2014年2月：在此之前的jQuery 1.6是真实的，但事实并非如此，因为引进的prop()1.6] ，没有属性。该value属性仅指定输入的初始值。一旦输入中的实际文本发生更改（通过用户输入或脚本），value 属性和属性将完全独立运行。在几乎所有情况下，这都无关紧要，因为它几乎总是您想要的当前值（并且是提交给服务器的值）。
If you really must change the actual attribute (which I'm pretty sure you don't), do it via setAttribute():
如果您确实必须更改实际属性（我很确定您不会这样做），请通过setAttribute()以下方式进行：
input[0].setAttribute('value', 'myNewVal');
Note that IE < 8 (and compatibility modes in IE 8) has broken support for getAttribute()and setAttribute()that maps attributes to properties, so the above doesn't apply in those browsers.
请注意，IE < 8（以及 IE 8 中的兼容模式）已经破坏了对属性的支持getAttribute()并将setAttribute()属性映射到属性，因此上述内容不适用于这些浏览器。
回答by Mark Coleman
Use .val().
使用.val().
input.val("some text");
Based upon your comment, the view sourcewill most likely not be updated. If you are still getting the original value, something else must be going on and more details most likely will be required.
根据您的评论，view source很可能不会更新。如果您仍然获得原始值，则必须进行其他操作，并且很可能需要更多详细信息。
jsfiddlegoodness.
jsfiddle善良。
回答by Corneliu
This is not a bug. The value attributte is not supposed to change.
这不是一个错误。价值属性不应该改变。
The inputcontrol is a bit special. According to the HTML spec, the valuecontent attribute gives the default value of the inputelement. You can see the actual control value which has been set programatically or changed by user in the DOM explorer. When the form is reset the value of the element is set to the value of the valuecontent attribute. (too many values here :))
该input控制的情况比较特殊。根据 HTML 规范，valuecontent 属性给出了input元素的默认值。您可以在 DOM 资源管理器中查看以编程方式设置或由用户更改的实际控件值。当表单被重置时，元素的值被设置为value内容属性的值。（这里的值太多:)）
This is the standard behaviour for all VISIBLE input types. (try setting value for a HIDDEN element and value content attribute will be updated ... in Firefox at least).
这是所有 VISIBLE 输入类型的标准行为。（尝试为 HIDDEN 元素设置值，值内容属性将被更新......至少在 Firefox 中）。
回答by Alex
Don't use .attr()to change the value, use .val(), which was made specifically for this purpose:
不要.attr()用于更改值 use .val()，这是专门为此目的制作的：
input.val("new value");
回答by Christian
That's because the developer tools do not refresh. This is a well known bug in these tools, including Opera's, Safari's as well as Firebug's (the latter one being a different issue).
那是因为开发人员工具不会刷新。这是这些工具中的一个众所周知的错误，包括 Opera 的、Safari 的以及 Firebug 的（后者是一个不同的问题）。
As far as I know, you can right-click the source tree window and hit "refresh". This doesn't refresh the page, just the source view. This "fix" doesn't work in firebug though.
据我所知，您可以右键单击源树窗口并点击“刷新”。这不会刷新页面，只会刷新源视图。不过，这个“修复”在萤火虫中不起作用。
回答by Gabriele Petrioli
The dev tools show you the source code as it arrived from the server (for the value attribute), so you see the truly original value.
开发工具向您显示从服务器到达时的源代码（对于 value 属性），因此您会看到真正的原始值。
If you want to alter it (and check against the new value) you can store a reference somewhere. Best would be to use the .data()method and check against that stored value.
如果您想更改它（并检查新值），您可以在某处存储一个引用。最好是使用该.data()方法并检查该存储值。
For usage purposes though (submitting or accessing it through JS), changing the value through the .attr()or .val()method should be enough.
但是出于使用目的（通过 JS 提交或访问它），通过.attr()or.val()方法更改值应该就足够了。
回答by skarmats
It won't change the value in the DOM explorer of most development tools. But JavaScript will still get the current values. So
它不会改变大多数开发工具的 DOM 资源管理器中的值。但是 JavaScript 仍然会获取当前值。所以
var newValue = 'new';
$(sel).val(newValue);
newValue == $(sel).val(); // true
回答by Nicholas Kreidberg
They responses that inform you to use the .val("value") method are correct, the only way that I know of to see these changes (in the source) is using the Firefox Web Developer Pluginand clicking "View Source" -> "View Generated Source". This shows the source afterDOM manipulation (i.e. calls to the .val() method) have occurred, I use it a lot when working with functions/methods that modify DOM elements.
他们通知您使用 .val("value") 方法的响应是正确的，我所知道的查看这些更改（在源代码中）的唯一方法是使用Firefox Web Developer Plugin并单击“查看源代码”-> “查看生成的源代码”。这显示了DOM 操作（即调用 .val() 方法）发生后的源代码，我在处理修改 DOM 元素的函数/方法时经常使用它。
So to recap: [#input_id = ID of your input field]
总结一下：[#input_id = 您输入字段的 ID]
$("#input_id").val("new value");
Then use the plugin to view the generated source and you will see the updated value.
然后使用插件查看生成的源代码，您将看到更新后的值。
回答by Anton
I have a case in which jQuery function .val()and .attr("value", "...")works incorrect for value with url. Functions update the user interface but it doesn't effect with DOM(source). In this case should be used:
我有一个案例，其中 jQuery 函数.val()和.attr("value", "...")url 的值不正确。函数更新用户界面，但它不会影响 DOM（源）。在这种情况下应该使用：
jQueryObj[0].setAttribute("value", "...");
It's right for jQuery v1.5.* => v1.6.*, for another versions it's not be checked.
它适用于 jQuery v1.5.* => v1.6.*，对于其他版本它不会被检查。
