[英]How to display a text box while selecting an option from a multiselect dropdown
I am developing a web page which has multiple drop down menu. 我正在开发一个具有多个下拉菜单的网页。 Now i need to display some text area according to the options selected in the drop down.
现在,我需要根据下拉菜单中选择的选项显示一些文本区域。 If it is a normal drop down i can do that easily.
如果是正常的下拉菜单,我可以轻松做到。 But here the problem is need to display multiple text areas on multiple selection of that drop down.
但是这里的问题是需要在下拉菜单的多个选择上显示多个文本区域。 Here is my code
这是我的代码
<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>
and here is my script 这是我的剧本
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();
}
}
Use a second function. 使用第二个功能。
The first one will be triggered ever time you change the selection of the checkbox. 每当您更改复选框的选择时,就会触发第一个。 It will change the class of the trigger source (the current active element) and add or remove a class (eg
selected
). 它将更改触发源的类别(当前活动元素),并添加或删除类别(例如
selected
)。 After this you start a second function named updateTextAreas
. 此后,您将启动另一个名为
updateTextAreas
函数。
Inside this Function you get all you elements with the given class (eg selected
) and walk over the result list. 在此函数内,您将获得具有给定类的所有元素(例如,
selected
),并遍历结果列表。 Then you could show the needed text areas and hide all others. 然后,您可以显示所需的文本区域并隐藏所有其他区域。
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]
});
}
Hope I understand you right. 希望我能正确理解你。
The problem got solved now. 现在问题解决了。 I used the following script.
我使用了以下脚本。
$('#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();
}
});
Thanks to all. 谢谢大家。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.