Javascript onchange select list
Javascript onchange 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>
当用户选择"从EE代理转移"时,我需要出现四个新的输入框,但当选择任何其他选项时不出现?
所以我假设它需要一个onchange代码?
我只是不确定如何
提前感谢您的帮助
微调电容器
当在组合框中选择特定值时,您将需要一些javascript代码来显示其他字段。我使用了简单的javascript代码,以便每个人都能快速理解。
首先在表中添加其他字段,并使用样式属性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>
我已经为这行分配了一个id other_fields,所以在onchange事件中,如果值与所需的值匹配,那么我们将显示它,否则隐藏它。
其次,添加以下javascript函数并在加载函数中调用它。这将为这个选择框附加一个突发处理程序。
<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>
最后在body标签中调用这个函数:
<body onload="onload()">
参见工作示例:
http://jsfiddle.net/YpVGE/1/
希望能有所帮助
$('#CallLeadType').on('change', function()
{
if ( $('.CallLeadType option:selected').val() == 'Transfer from EE Agent' )
{
//create inputs here
}
});
可以使用jquery
$('select[name=CallLeadType]').on('change',function(){
if ( $(this).val() == 'Transfer from EE Agent' )
{
//create inputs here
}
});
$('#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
}
});
你可以使用这个,它应该被触发,即使你点击下拉列表,在模糊事件被触发之前(与简单的onchange事件相比):
{oninput事件支持: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);
});
<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();
}
});
});
你基本上需要两件事,一个事件 (.change),当你改变元素'select'的值时你可以触发它,另一个伪类 (:selected)允许获得你的select的当前值,所以你可以创建正确的条件,当你选择'Transfer from EE Agent'时显示四个输入,当你不选择该选项时隐藏它。
这样修改你的Html:
<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();
}
});
});
相关文章:
- jquery点击函数select&取消选择
- 在html Select中添加搜索
- Jquery:未触发select事件
- 如何在PHP中使用$_POST获取Select元素值
- 无法在Ionic select中预先选择最后一个选项
- Dojo:访问dijit.form.Select中单击的项目
- missing ) after argument list DATEDIF
- X秒后刷新select元素
- 根据select选项元素将表单重定向到不同的URL
- 在select元素中显示highchart dashstyle(svg)
- jQuery动态表单显示在select选项上
- Javascript Select OnChange没有'不要第二次工作
- 更改基于它的Select OPTION's INDEX(Jquery)
- 正在获取select上的功能id
- 根据Select值添加/删除表行
- 使用 Jquery 将 SelectListItems 的 JSON 列表映射到下拉列表 Select List 并指示
- Javascript onchange select list
- 用Javascript从一个名为Select list的Rails通配符中获取一个Select值
- Button href changed by select list won't resolve (javasc
- 当使用bootstrap的list-group css类时,option标签不会被添加到select标签中