根据下拉选择填写2个输入
Filling 2 inputs based on dropdown selection
我希望根据下拉菜单的选择填充2个字段。这是我现在使用的代码(它可以工作,但在我的情况下不起作用):
<script type="text/javascript">
function updateinput(){
var e = document.getElementById("event");
var catSelected = e.options[e.selectedIndex].value;
document.getElementById("minLvl").value=catSelected;
}
</script>
和相关的HTML:
<table>
<tr>
<td>Event:</td>
<td>
<select name="Event" id="event" onChange="updateinput();">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
<option value="option6">option6</option>
<option value="option7">option7</option>
</select>
</td>
</tr>
<tr>
<td>Starting Time:</td>
<td><input type="text" name="dateTime"/></td>
</tr>
<tr>
<td>Level Range:</td>
<td><input type="text" size="3" maxlength="3" id="minLvl"> - <input type="text" size="3" maxlength="3" id="maxLvl"></td>
</tr>
<tr>
<td>Notes:</td>
<td><textarea></textarea></td>
</tr>
<tr>
<td>Create Event:</td>
<td><input type="button" value="Create event!"></td>
</tr>
</table>
我知道我可以使用e.options[e.selectedIndex].text
来获取文本并将其放置在输入中,但是是否有一种方法可以为每个选项添加属性,因此它像<option value="option1" minLvl="1" maxLvl="10">Option1</option>
一样,然后从minLvl
和maxLvl
提取数据,然后将值填充到输入中?
function updateinput(){
var e = document.getElementById("event");
var catSelected = this.value;
document.getElementById("minLvl").value=catSelected;
}
<select name="Event" id="event" onChange="updateinput(this);">
我可以用下面的代码让它工作:
<script type="text/javascript">
function updateinput(){
var e = document.getElementById("event");
var minLvl = e.options[e.selectedIndex].getAttribute("minLvl");
var maxLvl = e.options[e.selectedIndex].getAttribute("maxLvl");
document.getElementById("minLvl").value=minLvl;
document.getElementById("maxLvl").value=maxLvl;
}
</script>
<option value="option" minLvl="1" maxLvl="3">option</option>
相关文章:
- jQuery自定义验证比较多个输入的序列
- 使用javascript检查多个输入值,并在1次检查中标记多个输入框
- javascript函数,它接受两个输入:一个对象和一个键,并返回对象中该键的相应值
- 如何选择多个输入字段并删除所需的属性
- 比较jquery中的两个输入
- 选择单选按钮更新2个输入字段
- 使用javascript将两个输入的日期添加在一起
- 如何将(a*b)两个输入文本值相乘,并在javascript中随文本变化动态显示
- 如何获取具有相同id的多个输入值
- jQuery DatePicker:多个输入出现错误
- 从父元素AngularJS中获取多个输入字段的值
- 在JS的下拉列表中选择多个输入参数
- jquery表单提交无法使用多个输入(IE和Firefox)
- NodeJS readline有时会打印回第一个输入行(但并不总是,看起来是随机的)
- 通过程序从多个输入字段上传多个文件-blueimp jquery fileupload
- 比较两个输入字段
- 为具有相同类的多个输入添加、移除和添加一个类
- 如何使用 JavaScript 从单元格中选择第二个输入框
- 在 JavaScript 中计算两个输入字段值
- 在 ng 模型中具有单向绑定的两个输入