设置 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>