-1

请问有人可以帮忙吗？

我有以下选择列表：

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

我只是不确定如何

在此先感谢您的帮助

垫板机

4

7 回答 7

2 
$('#CallLeadType').on('change', function()
{
  if ( $('.CallLeadType option:selected').val() == 'Transfer from EE Agent' )
  {
    //create inputs here
  }
});
于 2013-05-14T12:08:16.280 回答
2

在组合框中选择特定值时，您将需要一些 javascript 代码来显示其他字段。我使用了简单的 javacript 代码，以便每个人都能快速理解它。

首先在表格中添加其他文件并使用样式属性 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函数并在加载函数中调用它。这会将一个 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()">

请参阅以下工作示例：

http://jsfiddle.net/YpVGE/1/

希望这可以帮助

于 2013-05-14T12:24:36.827 回答
1

你可以使用jquery

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

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

});
于 2013-05-14T12:10:28.217 回答
0 
$('#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
}
});
于 2013-05-14T12:11:21.977 回答
0

您可以使用它，即使您单击下拉列表并且在触发模糊事件之前也应该触发它（与简单的 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);
});
于 2013-05-14T12:14:23.367 回答
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();
          }
    });
});
于 2013-05-14T12:18:20.110 回答
0

您基本上需要两件事，一个事件（.change），您可以在更改元素“select”的值时触发它和一个伪类（：selected），它允许获取您的选择的当前值，所以您可以创建正确的条件，当您选择“从 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>

脚本：

$(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();
        }
    });
});
于 2013-05-14T13:03:00.913 回答