javascript 使用javascript在更改下拉列表时填充表单字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5323318/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Populating form fields on change of drop down using javascript
提问by Angeline
I am trying to populate data in my fields depending on the value selected in the drop down box. I have passed the dropdown option select to the javascript function, but having problem in updating the form fields. Please check my code for the error I've committed.
我正在尝试根据下拉框中选择的值在我的字段中填充数据。我已将下拉选项 select 传递给 javascript 函数，但在更新表单字段时遇到问题。请检查我的代码是否存在我所犯的错误。
This is my html code:
这是我的 html 代码：
<div class="form-ui">
<span class="form-elements reqField">
<select class="dropdown" onchange="populateData(this.options[this.selectedIndex].value,1)">
<option value="1">Please Select</option>
<option value="2">Mrs.Jane Smith</option>
<option value="3">Mr.Junior Smith</option>
</select>
</span>
<span class="form-elements reqField">
<select id="itle1" class="dropdown">
<option value="1">Mr.</option>
<option value="2">Ms.</option>
<option value="3">Mrs.</option>
</select>
</span>
<span class="form-elements">
<input id="FirstName1" type="text" class="text" value="" />
</span>
<span class="form-elements reqField">
<input id="LastName1" type="text" class="text" value="" />
</span>
</div>
And the javascript code:
和 javascript 代码：
function populateData(value,person){
if(value==2){
$('#Title'+person).value=3;
$('#FirstName'+person).value="Jane";
$('#LastName'+person).value="Smith";
}
if(value==3){
}
}
回答by andyface
quick answer is that I think you need to use val() not value - can't quite remember how it works with select though
快速回答是，我认为您需要使用 val() 而不是 value - 虽然不太记得它是如何与 select 一起使用的
回答by Clyde Lobo
jQuery uses val()to get and set values.
jQuery 用于val()获取和设置值。
So your js function should be
所以你的js函数应该是
$('#FirstName'+person).val("Jane");
$('#LastName'+person).val("Smith");
and not
并不是
$('#FirstName'+person).value="Jane";
$('#LastName'+person).value="Smith";
Also
还
<select class="dropdown" onchange="populateData(this.options[this.selectedIndex].value,1)">
<select class="dropdown" onchange="populateData(this.options[this.selectedIndex].value,1)">
should be
应该
<select class="dropdown" onchange="populateData(this.value,1)">
<select class="dropdown" onchange="populateData(this.value,1)">
回答by Emmanuel
HTML ID error here <select id="itle1" class="dropdown">Should be Title1not itle1
此处的 HTML ID 错误不<select id="itle1" class="dropdown">应该Title1itle1
Also I think the javascript should look like this
我也认为 javascript 应该是这样的
function populateData(value,person){
if(value==2){
$('#Title'+person+' option[value="3"]').attr('selected','selected');
$('#FirstName'+person).val("Jane");
$('#LastName'+person).val("Smith");
}
if(value==3){
}
}
回答by Mic
You could use a FORM instead of a DIV, and the attribute name, instead of id.
They were designed a long time ago to manage forms.
您可以使用 FORM 而不是 DIV，使用属性name, 而不是id.
它们是很久以前设计的，用于管理表单。
You can use jQuery for that, but everything is already built-in in pure Javascript to handle forms.
您可以为此使用 jQuery，但一切都已经内置在纯 Javascript 中来处理表单。
<form class="form-ui">
<span class="form-elements reqField">
<select class="dropdown" onchange="populateData(this)">
<option value="1">Please Select</option>
<option value="2">Mrs.Jane Smith</option>
<option value="3">Mr.Junior Smith</option>
</select>
</span>
<span class="form-elements reqField">
<select name="title" class="dropdown">
<option value="1">Mr.</option>
<option value="2">Ms.</option>
<option value="3">Mrs.</option>
</select>
</span>
<span class="form-elements">
<input name="FirstName" type="text" class="text" value="" />
</span>
<span class="form-elements reqField">
<input name="LastName" type="text" class="text" value="" />
</span>
</form>
<script>
function populateData(sel){
var form = sel.form,
value = sel.options[sel.selectedIndex].value;
switch(value){
case '3':
form.FirstName.value = 'Junior';
form.LastName.value = 'Smith';
form.title.value = '1';
break;
case '2':
break;
default:
}
}
</script>
