如何在选择选项后显示多个表单输入
how to make multiple form inputs appear after option is selected
长期浸出者,第一次海报。
我在这里找到了一个很棒的片段,从下拉菜单中选择选项后会出现表单文本输入。它的工作方式类似于一个超级按钮,每个选项现在都有一个与之关联的输入。现在我需要调整 js 以使选项二出现两个主菜,选项三出现三个主菜,最多五个。目前,每个选项都会显示一个文本框。因此,在选项 2 上,我需要显示"text1"和"text2",在选项 3 上,我需要"text1"文本 2"和"text3"才能出现,依此类推。
如果我不清楚,请告诉我。这是我正在使用的内容。
<select id='combo'> <option>0</option> <option>1</option> <option>2</option> </select> <input id='text1' style='display: none'/> <input id='text2' style='display: none'/> <input id='text3' style='display: none'/> '' <script> document.getElementById('combo').onchange = function() {
var display = this.selectedindex == 0 ?"内联" : "无"; document.getElementById('text1').style.display = display;
var display = this.selectedindex == 1 ?"内联" : "无"; document.getElementById('text2').style.display = display;
var display = this.selectedindex == 2 ?"内联" : "无"; document.getElementById('text3').style.display = display;
} ''
感谢您抽出宝贵时间。
我会通过循环在纯JS中执行此操作。这也使您能够在不编辑 JS 的情况下添加更多输入
http://jsfiddle.net/odj3pmtg/1
document.getElementById('combo').onchange = function() {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; ++i)
{
if(i < document.getElementById('combo').value){
inputs[i].style.display = 'inline';
} else {
inputs[i].style.display = 'none';
}
}
}
有人可以对此进行改进,但它应该有效:
document.getElementById('combo').onchange = function() {
// first reset all to hidden
document.getElementById('text1').style.display = 'none';
document.getElementById('text2').style.display = 'none';
document.getElementById('text3').style.display = 'none';
// then switch case to show the required boxes
switch(this.selectedIndex){
case 0:
document.getElementById('text1').style.display = 'inline';
break;
case 1:
document.getElementById('text1').style.display = 'inline';
document.getElementById('text2').style.display = 'inline';
break;
case 2:
document.getElementById('text1').style.display = 'inline';
document.getElementById('text2').style.display = 'inline';
document.getElementById('text3').style.display = 'inline';
break;
default:
break;
}
}
这应该适合您:
$('#combo').change(function(){
$('#myOptionsDiv').html(''); //added this to clear the div before setting inputs
var num =$(this).val();
for(var i = 0; i < num; i++){
$('#myOptionsDiv').append('<input type="text" class="myInputs" /><br>');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='combo'>
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<div id="myOptionsDiv"> </div>
如果要访问这些字段,可以像这样操作:
var firstInputValue = $('.myInputs:eq(0)).val(); //use 0 in :eq() because arrays start at 0
var secondInputValue = $('.myInputs:eq(1)).val();
尝试将其更改为 for 循环。这可能行不通,但你明白了。
document.getElementById('combo').onchange = function() {
for (var i = 0; i <= this.selectedIndex; i++) {
var display = this.selectedIndex == i ? "inline" : "none"; document.getElementById('text'+(i+1)).style.display = display;
}
}
- 可以't让我的if语句处理js中的html表单输入
- 如何在submit to sightly时将表单输入值作为参数传递给WCMUsePojo
- 单击鼠标,用MySQL数据填充html表单输入字段
- 从HTML表单发布blob的表单输入类型是什么
- 在不使用PHP的情况下将表单输入值获取到Javascript中
- 在Chrome中重新加载页面后清除表单输入值
- CasperJS填充表单-输入名称有方括号
- 表单输入字段随着溢出的文本而增长
- Highcharts:根据表单输入动态显示数据
- 如何在为表单输入分别处理$(this)和$时编写DRY代码
- 如何从AngularJS表单输入中生成一个永久变量
- 将表单输入保存到txt,弹出结果,不更改页面
- 在表单输入字段中创建默认值
- 如何根据提交表单时下拉框中的值禁用html表单输入框
- 使用jQuery延迟表单输入,并在延迟后在同一页面上显示结果
- Jquery无法找到给定表单id的表单输入
- 如何使用javascript验证在表单输入中避免负值、浮点值和十进制值
- 对表单输入执行计算
- Javascript 重复表单输入
- 使用 JavaScript 计算并添加表单输入的值