Fatal编程技术网

Javascript onchange选择列表

javascript jquery

Javascript onchange选择列表,javascript,jquery,Javascript,Jquery,有人能帮忙吗 我有以下选择列表： <td>Call Lead Type: </td> <td> <select name="CallLeadType" id="CallLeadType"> <option value=""></option> <option value="LSG Service warm transfer from Claims">LSG Service

有人能帮忙吗

我有以下选择列表：

<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代码

我只是不知道怎么做

提前谢谢你的帮助

填充器

您可以使用jquery

$('#CallLeadType').on('change', function()
{
  if ( $('.CallLeadType option:selected').val() == 'Transfer from EE Agent' )
  {
    //create inputs here
  }
});

$('select[name=CallLeadType]').on('change',function(){

 if ( $(this).val() == 'Transfer from EE Agent' )
{
//create inputs here
}

});
您可以使用此选项，与简单的onchange事件相比，在触发模糊事件之前，即使单击下拉列表，也应触发此选项：

{oninput事件支持：}

当在组合框中选择特定值时，需要一些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和其他_字段，因此在onchange事件中，如果该值与所需值匹配，那么我们将显示它，否则将隐藏它

其次，添加以下javascript函数并在加载函数中调用它。这会将一个ebent处理程序附加到此选择框

<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()">
请参见以下工作示例：

希望这有帮助

您基本上需要两件事，一个事件。当您更改元素“select”的值时可以触发的更改和一个伪类：selected允许获取select的当前值，因此，您可以创建正确的条件，在选择“从EE代理传输”时显示四个输入，在未选择该选项时隐藏

通过以下方式更改您的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>
输入元素在哪里？CallLeadType不是类！live已弃用，最新jquery版本中不再支持live CallLeadType ID不是类@palash mondal这是一个身份证和名字。他使用的查询将搜索name属性而不是class select[name=CallLeadType]我使用了您的代码，但在选择JSFIDLE之类的传输选项时，我无法使其工作。您说要将onload添加到body标记中，当我这样做时，我得到了一个堆栈溢出错误？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 onload="onload()">

    <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>

$(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();
        }
    });
});