設置 select 標簽值的最佳實踐

Question

例如 - 個人資料頁面 - 用戶想要更改 select 標簽中的一些值
你不能說 - <select id='lorem' value='ipsum'>
你必須 go 到 javascript - $('#lorem').val('ipsum')
這是真的嗎？
有沒有更好的做法 - 如果你有很多 select 標簽？
順便說一句 - 為什么 html 開發人員會這樣 - 一定有一些強有力的理由

Answer 1

您的“問題”確實包含多個問題，因此我將答案分為多個部分。

<select>和<option>

select 最初是<select>的<option> ，將selected -attribute 添加到<option> 。 選擇<option>會使<select>具有所選選項的值。

 var select = document.querySelector('select'); var code = document.querySelector('code'); select.addEventListener('change', () => code.textContent = select.value); code.textContent = select.value;

 body {display:flex;align-items:center;gap:0.5rem} code {padding:0 0.2rem;background:lightgray}

 <select> <option value="first">First option</option> <option value="second" selected>Second option, initially selected</option> <option value="third">Third option</option> </select> <span>Select's 'value': <code></code></span>

給<select>一個value屬性將被瀏覽器引擎忽略，因為 HTML5 沒有指定<select>標記具有一個value屬性。
注意： HTML 屬性value和 JavaScript 屬性.value不一定相互關聯。

請參閱此示例以供參考：

 var select = document.querySelector('select'); var code = document.querySelector('span > code'); select.addEventListener('change', evt => { code.textContent = evt.target.value; }); code.textContent = select.value;

 body {display:flex;flex-flow:column;align-items:flex-start;gap:0.5rem} code {padding:0 0.1rem;background:lightgray}

 <div> <code>&lt;select&gt;</code> has the attribute <code>value="from-select"</code>. </div> <select value="from-select"> <option value="from-opt1">Opt1</option> <option value="from-opt2">Opt2</option> </select> <span>Select's 'value': <code></code></span>

要動態更改<option>的值，您必須使用 JavaScript。

 var input = document.querySelector('input'); var option = document.querySelector('option'); var code = document.querySelector('code'); // Ignore; update 'pre.textContent' when changing 'value' option.setAttribute = function(name, value) { HTMLElement.prototype.setAttribute.call(this, name, value); if (name === 'value') code.textContent = value; }; // How to change the 'value'-attribute using JS document.querySelector('button').addEventListener('click', () => { option.setAttribute('value', input.value); input.value = ''; });

 body {display:flex;flex-flow:column;align-items:flex-start;gap:0.5rem} code {padding:0.1rem 0.2rem;background:lightgray}

 <span> <input> <button>Change value of 'Option'</button> </span> <select> <option value="initial-value">Option</option> </select> <span>Option's value: <code>initial-value</code></span>

關於“為什么 html 開發人員會這樣”

釋義：為什么 HTML 不能自行更改其標記？

原因是，HTML 最初是為通過 Internet 提供的科學文檔創建的。 由於互聯網本質上是互連的、可能完全不同的設備的 web，因此 HTML 必須盡可能不特定和“與設備無關”，以允許在幾乎任何具有顯示器的設備上呈現它。

出於這個原因，任何進一步的資源（例如樣式表、腳本、圖像）對於 HTML 的渲染應該只是可選的，因為 HTML 應該是“原樣”可渲染的。
HTML 也應該是向后兼容的，這意味着未來對 HTML 規范的更改絕不會妨礙 HTML 的服務。 這意味着，基本上，任何未知的東西都會被渲染引擎（今天的瀏覽器）忽略，因此所有當時存在的功能仍然可以按預期工作。

最初，除了提供 static 內容之外，HTML 並沒有任何其他功能。 然而，在過去的幾十年里，互聯網經歷了技術進步的“熱潮”，現在，JavaScript實際上是任何瀏覽器引擎和網站的一部分，使它們能夠擁有先進的功能並具有交互性。

互聯網正處於不斷發展的 state 中，並且永遠都是。 忽視互聯網的新 state 及其規范（例如瀏覽器引擎等）將意味着一個人沒有與時俱進，對自己隱瞞新的、現代的和當前的信息和知識，實質上是把一個人拋在后面。

在任何技術領域都很難找到“傳統”，因為新的進步和發現只是其中的一部分。

要了解有關互聯網根源的更多信息（即使視頻主題是關於 CSS），我建議觀看MDN 的視頻，了解為什么 CSS 很奇怪（以及 HTML 是如何形成的） 。

關於你的“問題”...

正如您在評論中進一步解釋的那樣：

我有一些關於數據庫中每個用戶的數據。 這些數據來自注冊表。 該表格具有 select 標簽。 現在，用戶想要更改他的個人資料中的一些數據。 Tha 數據需要在 select 標簽上顯示。 像在任何其他輸入中一樣，使用 value 屬性來做到這一點是正常的 - 沒有 javascript

你可以通過兩種方式做到這一點：

1. 為每個用戶數據創建一個包含一個字段的<form> 。 有了這個，您還有兩個選擇：
   1. 准備字段以保存其當前數據。 然后用戶可以輕松地提交他的更改。
   2. 將字段留空。 如果提交后字段為空，則忽略建議的“更改”。
2. 讓用戶select一次改一個什么數據。 同樣，還有兩個選項可以實現這一目標：
   1. 獲取該字段的當前數據。 用戶可以更改它，然后再次輕松提交。
   2. 讓用戶重新輸入新數據，然后提交。

下面是一個簡單示例，說明選項 2.2 的 HTML 在實施時的外觀：
注意：出於演示目的，我將<button>的默認類型從type="submit"更改為type="button" 。

 var select = document.querySelector('select'); var input = document.querySelector('input'); document.querySelector('button').addEventListener('click', () => { console.log(`Would change user-data '${select.value}' to the value '${input.value}'.`); });

 <form> <select> <option value="name">Name</option> <option value="address">Address</option> <option value="email">E-Mail</option> </select> <input> <button type="button">Submit</button> </form>