Javascript onchange select list
Question
Please can someone help?
I have the below select list:
<td>Call Lead Type: </td>
<td>
<select name="CallLeadType" id="CallLeadType">
<option value=""></option>
<option value="LSG Service warm transfer from Claims">LSG Service warm transfer from Claims</option>
<option value="IVR Direct Call">IVR Direct Call</option>
<option value="Transfer from EE Agent">Transfer from EE Agent</option>
<option value="Dropped Line">Dropped Line</option>
<option value="Test Call from EE">Test Call from EE</option>
</select>
</td>
When the user selects "Transfer from EE Agent" I need four new input boxes to appear but not appear when any of the other options are selected?
So I assume it's an onchange code it needs?
I'm just not sure how
Thanks in advance for your help
Padders
7 answers
solution1
1 2013-05-14 12:08:16
$('#CallLeadType').on('change', function()
{
if ( $('.CallLeadType option:selected').val() == 'Transfer from EE Agent' )
{
//create inputs here
}
});
solution2
1 2013-05-14 12:10:28
you can use jquery
$('select[name=CallLeadType]').on('change',function(){
if ( $(this).val() == 'Transfer from EE Agent' )
{
//create inputs here
}
});
solution3
1 ACCPTED 2013-05-14 12:24:36
You will require some javascript code to display other fields when a specific value is selected in combo box. I have used simple javacript code so that everyone can understand it quickly.
First add the other fileds within the table and hide them with style property display:none
<tr id="other_fields" style="display:none">
<td>Other Fields</td>
<td>
<input type="text" value="field1"/>
<input type="text" value="field2"/>
<input type="text" value="field3"/>
<input type="text" value="field4"/>
</td>
</tr>
I have assigned this row an id other_fields, so in onchange event if the value matches with the required one then we will show it otherwise hide it.
Secondly, Add the following javascript function and call it in on load function. This will attach an ebent handler to this select box.
<script type="text/javascript">
function onload() {
document.getElementById("CallLeadType").onchange = function (e) {
if (this.value == 'Transfer from EE Agent') {
document.getElementById("other_fields").style.display="";
} else {
document.getElementById("other_fields").style.display="none";
}
};
}
</script>
Finally in body tag call this function:
<body onload="onload()">
See the working example at:
Hope this helps
solution4
0 2013-05-14 12:11:21
$('#CallLeadType').live("change",function(){
var Id=document.getElementById("CallLeadType");
var value = Id.options[Id.selectedIndex].text;
if(value=="Transfer from EE Agent"){
// your code to add textboxes
}
});
solution5
0 2013-05-14 12:14:23
You could use this, this should be fired even you click on dropdown list and before blur event get fired (compared to simple onchange event):
{oninput event support: http://help.dottoro.com/ljhxklln.php }
var timeoutChange;
$('#CallLeadType').on('change input paste propertychange', function()
{
clearTimeout(timeoutChange);
timeoutChange = setTimeout(function(){
//code your logic here
},0);
});
solution6
0 2013-05-14 12:18:20
<td>Call Lead Type: </td>
<td>
<select name="CallLeadType" id="CallLeadType">
<option value=""></option>
<option value="LSG Service warm transfer from Claims">LSG Service warm transfer from Claims</option>
<option value="IVR Direct Call">IVR Direct Call</option>
<option value="Transfer from EE Agent">Transfer from EE Agent</option>
<option value="Dropped Line">Dropped Line</option>
<option value="Test Call from EE">Test Call from EE</option>
</select>
<input type="text" class="transferInput"/>
<input type="text" class="transferInput"/>
</td>
$(function(){
$('.transferInput').hide();
$('#CallLeadType').on('change', function(){
$('.transferInput').hide();
if ( $('#CallLeadType').val() == 'Transfer from EE Agent' ){
$('.transferInput').show();
}
});
});
solution7
0 2013-05-14 13:03:00
You need basically two things, an event (.change) which you can trigger when you change the value of the element 'select' and a pseudo-class (:selected) that permit to get the current value of your select, so you can create the correct condition that show the four inputs when you choose 'Transfer from EE Agent' and hide when you not select that option.
Change your Html in this way:
<td>Call Lead Type: </td>
<td>
<select name="CallLeadType" id="CallLeadType">
<option value=""></option>
<option value="LSG Service warm transfer from Claims">LSG Service warm transfer from Claims</option>
<option value="IVR Direct Call">IVR Direct Call</option>
<option value="Transfer from EE Agent">Transfer from EE Agent</option>
<option value="Dropped Line">Dropped Line</option>
<option value="Test Call from EE">Test Call from EE</option>
</select>
<!-- add the inputs and hide them -->
<div id="inputsTEEA" style="disply:hide">
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
</div>
</td>
javaScript:
$(function(){
var $inputsTEEA = $('#inputsTEEA');
// every time that you choose a different item in the select, this event is triggered
$('#CallLeadType').change(function(){
var
$select = $(this),
//pseudo class selected, you get the value of the currently option selected
valSelect = $select.find('option:selected').val();
if(valSelect == 'Transfer from EE Agent'){
$inputsTEEA.show();
}
else{
$inputsTEEA.hide();
}
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.