# 為什麼 jquery 設 val 後，畫面上 跟 Debug Element 看到的不一樣？
###### tags: `被玩壞了`

## 問題

畫面上顯示的順序和 Debug 看到的 value 不同，**但是傳回後端是正確的(畫面上的)!!!**

## 查問題

[參考-Difference between Element.value and Element.getAttribute(“value”)
](https://stackoverflow.com/questions/11973678/difference-between-element-value-and-element-getattributevalue)

[參考-Why does jquery .val() only change value attribute for hidden input fields?
](https://stackoverflow.com/questions/31322704/why-does-jquery-val-only-change-value-attribute-for-hidden-input-fields)

> .val() changes the elements property value, not attribute value. Attributes are what the html shows on initial render and properties contain the actual values in the DOM object which can be changed many times but may not be displayed in HTML after initial render.
>
>.val(myValue) is shorthand for .prop('value', myValue)
>

## 原理
* Debug Element 看到的是 attribute
* attribute 是初期 Html 渲染的內容
* property 是實際的值，在初期渲染後，就不會再去更新 attribute
* jquery.val 只有改 prop (property)，沒有更新 attribute

## 結論
所以如果想要 element 看到也是對的結果，除了 jquery.val() 要一起改 attribute，但是其實不影響傳回去的結果

$(someElement).val(2);
$(someElement).attr('value',2);