如何在输入文本字段中显示值？
[英]How to display a value in input text field?
问题描述
Let's say I am using a select tag which has several options, when I select one option it should display a certain value that I have to manually set in the input field below.
假设我正在使用一个 select 标签，它有几个选项，当我使用 select 一个选项时，它应该显示一个我必须在下面的输入字段中手动设置的值。
<select name="cars" id="cars"> <option value="volvo">Volvo-100</option> <option value="saab">Saab-200</option> <option value="mercedes">Mercedes-300</option> <option value="audi">Audi-400</option> </select> <input type="text" id="name" name="name">
So for example if I select Volvo the input field should display the value 100.If I select Audi the input field should display the value 400. I really need the help please!例如，如果我 select 沃尔沃，输入字段应显示值 100。如果我 select 奥迪，输入字段应显示值 400。我真的需要帮助！
6 个解决方案
解决方案1
3 已采纳 2021-05-10 18:26:42
You can check this solution.您可以检查此解决方案。
element.options and element.selectedIndex will do the trick. element.options和element.selectedIndex可以解决问题。 Here is the link for details这是详细信息的链接
const select = document.querySelector('#cars'); const input = document.querySelector('#name'); select.addEventListener('change', function(e) { const option = this.options[this.selectedIndex]; const value = option.text.split('-')[1]; input.value = value; })
<!DOCTYPE html> <html lang="en"> <head> <title>Title</title> <body> <select name="cars" id="cars"> <option value="volvo">Volvo-100</option> <option value="saab">Saab-200</option> <option value="mercedes">Mercedes-300</option> <option value="audi">Audi-400</option> </select> <input type="text" id="name" name="name" value="100"> </body> </html>
解决方案2
1 2021-05-10 18:26:27
You can do it pretty simply by using change event listener.您可以通过使用change事件侦听器非常简单地做到这一点。 You would also have to update the value attribute of each option to the values you specified in your question.您还必须将每个option的value属性更新为您在问题中指定的值。 The event.target.value will provide you the first selected option. event.target.value将为您提供第一个选择的选项。
For example:例如：
const selectEl = document.querySelector('#cars'); const textInputEl = document.querySelector('#name'); selectEl.addEventListener('change', event => { textInputEl.value = event.target.value; });
<select name="cars" id="cars"> <option value="100">Volvo</option> <option value="200">Saab</option> <option value="300">Mercedes</option> <option value="400">Audi</option> </select> <input type="text" id="name" name="name">
Resources:资源：
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
解决方案3
1 2021-05-10 18:29:56
- use addEventListener使用 addEventListener
- Split the text if present拆分文本（如果存在）
- Add a 0 option otherwise you cannot select volvo from start添加一个 0 选项，否则你不能从一开始就 select volvo
- Do not name a field
namesince name is used elsewhere in the DOM and the field does not hold a name不要命名字段name，因为名称在 DOM 中的其他地方使用并且该字段没有名称
document.getElementById("cars").addEventListener("change", function() { const text = this.options[this.selectedIndex].text const value = this.selectedIndex > 0? text.split("-")[1]: ""; document.getElementById("carNumber").value = value; })
<select name="cars" id="cars"> <option value="">Please select</option> <option value="volvo">Volvo-100</option> <option value="saab">Saab-200</option> <option value="mercedes">Mercedes-300</option> <option value="audi">Audi-400</option> </select> <input type="text" id="carNumber" name="carNumber">
解决方案4
0 2021-05-10 18:28:23
You could do this with these two lines:你可以用这两行来做到这一点：
const [cars, name] = ['cars', 'name'].map(document.getElementById.bind(document)); cars.addEventListener('change', ({ target: { selectedOptions: { 0: option } } }) => name.value = option.innerText.split('-')[1]);
<select name="cars" id="cars"> <option value="volvo">Volvo-100</option> <option value="saab">Saab-200</option> <option value="mercedes">Mercedes-300</option> <option value="audi">Audi-400</option> </select> <input type="text" id="name" name="name">
解决方案5
0 2021-05-10 18:29:57
Here is the solution:这是解决方案：
function getSelectedCar(sel) { document.getElementById("name").value = sel.options[sel.selectedIndex].text.split('-')[1] }
<select name="cars" id="cars" onChange="getSelectedCar(this);"> <option value="volvo">Volvo-100</option> <option value="saab">Saab-200</option> <option value="mercedes">Mercedes-300</option> <option value="audi">Audi-400</option> </select> <input type="text" id="name" name="name">
解决方案6
-2 2021-05-10 18:31:02
You've got a conflict of identifiers.您有标识符冲突。
I changed id="name" with xname and also added a onchange event.我用xname更改了 id="name" 并添加了一个onchange事件。
<select name="cars" id="cars" onchange="xname.value=this.value;">
<option value="volvo">Volvo-100</option>
<option value="saab">Saab-200</option>
<option value="mercedes">Mercedes-300</option>
<option value="audi">Audi-400</option>
</select>
<input type="text" id="xname" name="name" value="abc">
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.