如何在从多选下拉列表中选择选项时显示文本框
我正在开发一个有多个下拉菜单的网页。现在我需要根据下拉列表中选择的选项显示一些文本区域。如果是正常下降，我可以轻松地做到这一点。但是这里的问题是需要在多次选择下拉列表时显示多个文本区域。 这是我的代码
<div class="row form-group">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 ">
<spring:message text="Nature of Type" />
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<select id="nature" type="text" class="form-control"
multiple="multiple" onchange="ChangeNature(this)">
<option>Airticket(Round Trip)</option>
<option value="visa">Visa</option>
<option value="medical">Medical</option>
<option value="resident">Resident Card</option>
<option value="pickupdrop">Airport Pickup/Drop</option>
<option value="accommodation">First 7 Days Free
Accommodation</option>
<option value="other1">Other 1</option>
<option value="other2">Other 2</option>
</select> <span class="errorspan" id="nature_er">select the
type</span>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"
id="airticket_amt">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 rq-field">
<spring:message text="Airticket Amount" />
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<input id="amount" type='text' class="form-control numcls " />
<span class="errorspan" id="billinghrs_er">enter
airticket the Air ticket amount</span>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
</div>
<div class="row form-group multihide" id="visa_amt">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 ">
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"></div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 rq-field">
<spring:message text="Visa Amount" />
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<input id="amount" type='text' class="form-control numcls " />
<span class="errorspan" id="billinghrs_er">enter the
visa amount</span>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
</div>
<div class="row form-group multihide" id="medical_amt">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 ">
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"></div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 rq-field">
<spring:message text="Medical Amount" />
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<input id="amount" type='text' class="form-control numcls " />
<span class="errorspan" id="billinghrs_er">enter the
medical amount</span>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
</div>
<div class="row form-group multihide" id="residentcard_amt">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 ">
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"></div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 rq-field">
<spring:message text="Resident Card Amount" />
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<input id="amount" type='text' class="form-control numcls " />
<span class="errorspan" id="billinghrs_er">enter the
resident card Air ticket amount</span>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
</div>
<div class="row form-group multihide" id="pickupdrop_amt">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 ">
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"></div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 rq-field">
<spring:message text="Airport Pickup/Drop Amount" />
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<input id="amount" type='text' class="form-control numcls " />
<span class="errorspan" id="billinghrs_er">enter the
pickup/drop Air ticket amount</span>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
</div>
<div class="row form-group multihide" id="accommodation_amt">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 ">
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"></div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 rq-field">
<spring:message text="Free Accommodation Amount" />
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<input id="amount" type='text' class="form-control numcls" />
<span class="errorspan" id="billinghrs_er">enter the
free accommodation Air ticket amount</span>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
</div>
<div class="row form-group multihide" id="other1_amt">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 ">
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"></div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 rq-field">
<spring:message text="Other1 Amount" />
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<input id="amount" type='text' class="form-control numcls" />
<span class="errorspan" id="billinghrs_er">enter the
other1 Air ticket amount</span>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
</div>
<div class="row form-group multihide" id="other2_amt">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 ">
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"></div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 rq-field">
<spring:message text="Other2 Amount" />
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<input id="amount" type='text' class="form-control numcls" />
<span class="errorspan" id="billinghrs_er">enter the
other2 Air ticket amount</span>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
</div>
这是我的脚本
function ChangeNature(obj) {
var selectValue = obj;
var selected = selectValue.options[selectValue.selectedIndex].value;
/* var visa = document.getElementsByClassName("multihide");
var medical = document.getElementById("medical_amt");
var resident = document.getElementById("residentcard_amt");
var pickupdrop = document.getElementById("pickupdrop_amt");
var acc= document.getElementById("accommodation_amt");
var other1 = document.getElementById("other1_amt");
var other2 = document.getElementById("other2_amt"); */
if(selected ==="visa"){
$("#visa_amt").show();
}
if(selected ==="medical"){
$("#visa_amt").hide();
$("#medical_amt").show();
}
if(selected ==="resident"){
$("#medical_amt").hide();
$("#residentcard_amt").show();
}
if(selected ==="pickupdrop"){
$("#residentcard_amt").hide();
$("#pickupdrop_amt").show();
}
if(selected ==="accommodation"){
$("#pickupdrop_amt").hide();
$("#accommodation_amt").show();
}
else{
$("#accommodation_amt").hide();
}
}
2 个答案:
答案 0 :(得分：0)
使用第二个功能。
每次更改复选框的选择时，都会触发第一个。它将更改触发源的类（当前活动元素）并添加或删除类（例如selected）。在此之后，您将启动名为updateTextAreas的第二个函数。
在此函数中，您将获得给定类的所有元素（例如selected）并遍历结果列表。然后，您可以显示所需的文本区域并隐藏所有其他区域。
function ChangeNature(obj) {
$(obj).toggleClass('selected');
updateTextAreas();
}
function updateTextAreas(){
// hide everything
$("#visa_amt").hide();
$("#medical_amt").hide();
// get all selected options
$('.selected').each(function(i,e){
if($(e).hasClass("visa")){
$("#visa_amt").show();
}else if($(e).hasClass("medical")){
$("#medical_amt").show();
} [and so on]
});
}
希望我理解你。
答案 1 :(得分：0)
问题现在解决了。我使用了以下脚本。
$('#nature').on('change',function(){
var val = $('#nature').val();
if(val!=null){
arr = val.toString().split(",");
$('.multihide').hide();
for(var i=0;i<arr.length;i++){
if(arr[i]=="airticket"){$("#airticket_amt").show();}
if(arr[i]=="visa"){$("#visa_amt").show();}
if(arr[i]=="medical"){$("#medical_amt").show();}
if(arr[i]=="resident"){$("#residentcard_amt").show();}
if(arr[i]=="pickupdrop"){$("#pickupdrop_amt").show();}
if(arr[i]=="accommodation"){$("#accommodation_amt").show();}
if(arr[i]=="other1"){$("#other1_amt").show();}
if(arr[i]=="other2"){$("#other2_amt").show();}
}
}else{
$('.multihide').hide();
}
});
感谢所有人。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？