选择选项时如何自动设置表单中的输入值？
[英]How to auto Set input values in a form when select an option?
问题描述
I have a form for example: 
我有一个表格，例如：
<form>
<ul>
<li>
<select name="choose">
<option value="0">1</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</li>
<li><h2>No. Of person</h2></li>
<input type="text" name="ref_person"id="field" value="" />
<li><h2>earning of person:</h2></li>
<input type="text" name="ear_person" id="field" value="" />
</ul>
</form>
so, when I choose option:1 both the input fields must be filled with no. 因此，当我选择option：1时，两个输入字段都必须用no填充。 let say, No. of person = 3 and earning of person = $5. 假设人数为3，而收入为$ 5。
4 个解决方案
解决方案1
1 2015-12-24 21:41:11
Here is a code sample that uses the onchange event to copy values to the textboxes. 这是一个代码示例，该示例使用onchange事件将值复制到文本框。
<script type="text/javascript">
function selectOnChange(obj) {
var val = obj.options[obj.selectedIndex].value;
var text = obj.options[obj.selectedIndex].text;
document.getElementById("field1").value = val;
document.getElementById("field2").value = text;
}
</script>
</head>
<body>
<div>
<select onchange='selectOnChange(this)' name="choose">
<option value="100">1</option>
<option value="200">2</option>
<option value="300">3</option>
</select>
</div>
<ul><li><h2>No. Of person</h2></li></ul>
<div>
<input type="text" name="ref_person" id="field1" value="">
<ul>
<li><h2>earning of person:</h2></li></ul>
<input type="text" name="ear_person" id="field2" value="" />
</div>
解决方案2
1 2015-12-24 23:29:49
Your question should be as well written as you can make it, including valid, semantic HTML. 您的问题应写得尽可能好，包括有效的语义HTML。
Also, a question should contain the code you have tried, an explanation of what you have tried, where it's going wrong and exactly what you expect it to do, including some example input and output. 另外，一个问题应包含您尝试过的代码，您尝试过的内容，出现问题的位置以及您希望执行的操作的解释，包括一些示例输入和输出。
The following may help. 以下内容可能会有所帮助。 Note that element IDs must be unique and that forms should use semantic markup (eg don't use a list to present it, don't put headings inside lists, use labels, group elements using fieldsets, etc.). 请注意，元素ID必须是唯一的，并且表单应使用语义标记（例如，不要使用列表来呈现它，不要在列表中放置标题，使用标签，使用字段集对元素进行分组等）。
You can use the select element's change event to get the value and text of the selected option and display it elsewhere in the form. 您可以使用select元素的change事件获取所选选项的值和文本，并将其显示在表单中的其他位置。 You can also reference form controls as named properties of the form, which is handy and more straight forward than using getElementById . 您还可以将表单控件作为表单的命名属性引用，这比使用getElementById方便且直接。
In the code, a reference to the select is passed to the function using this . 在代码中，使用this将对select的引用传递给函数。 Every form control has a form property that is a reference to the form that it's in. The rest should be easy enough to understand, but please ask if you need other help. 每个表单控件都有一个form属性，该属性引用它所在的表单。其余控件应该很容易理解，但是请询问是否需要其他帮助。
function getPerson(select) { var form = select.form; form.ref_person.value = select.options[select.selectedIndex].text; form.ear_person.value = select.value; }
<form> <fieldset><legend>Person and earning</legend> <label for="personSelect">Select a person <select name="choose" id="personSelect" onchange="getPerson(this)"> <option value="0">1</option> <option value="100">2</option> <option value="500">3</option> </select> </label> <br> <label for="personNumber">No. Of person: <input type="text" name="ref_person"id="personNumber"></label> <label for="personEarning">Earning of person: <input type="text" name="ear_person" id="personEarning"></label> </fieldset> </form>
解决方案3
1 已采纳 2015-12-25 10:38:41
function getPerson(select) {
var form = select.form;
form.ref_person.value = select.options[select.selectedIndex].getAttribute('per');
form.ear_person.value = select.value;
}
<form>
<fieldset><legend>Person and earning</legend>
<label for="personSelect">Select a person
<select name="choose" id="personSelect" onchange="getPerson(this)">
<option per="3" value="0">1</option>
<option per="9" value="100">2</option>
<option per="27" value="500">3</option>
</select>
</label>
<br>
<label for="personNumber">No. Of person:
<input type="text" name="ref_person"id="personNumber"></label>
<label for="personEarning">Earning of person:
<input type="text" name="ear_person" id="personEarning"></label>
</fieldset>
</form>
解决方案4
0 2015-12-24 21:37:33
I couldn't get a switch statement to work, so I did it with three if statements, but here is my solution. 我无法使用switch语句来工作，因此我使用了三个if语句来执行此操作，但这是我的解决方案。 Fiddle with it yourself to make it as you wish. 自己弄弄它，使其如您所愿。
<form>
<ul>
<li>
<select name="choose" id="option1" onchange="relatedPrice()">
<option value="0">1</option>
<option value="1">2</option>
<option value="2">3</option>
</select>
</li>
<li><h2>No. Of person</h2></li>
<input type="text" name="ref_person" id="field1" value="" />
<li><h2>earning of person:</h2></li>
<input type="text" name="ear_person" id="field2" value="" />
</ul>
</form>
<script>
function relatedPrice() {
var e = document.getElementById("option1");
var test = e.options[e.selectedIndex].text;
document.getElementById("field1").value = test;
if(test==1) {
document.getElementById("field2").value = 100;
}
if(test==2) {
document.getElementById("field2").value = 200;
}
if(test==3) {
document.getElementById("field2").value = 300;
}
}
</script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.