Question

我已经对网络做了大量的研究来解决这个代码失败:(我有一个选择列表，它有一个onchange事件“emailils（）”。当选择某个索引值时，我有javascript拉一个数组值来填充“收件人”INPUT值。我知道一点javascript，但显然还不够。任何帮助都会很棒，提前谢谢我很抱歉如果这篇文章不是“论坛正确”那么这是我的第一个：）

<html> 
<head>
<script type="text/javascript">
function emails() {
var valObj = document.getElementsByName("recipient").value;
var selOpts = document.getElementsById("Concerning");
var selIndex = selOpts.selectedIndex;
var recValue = selOpts.options[selIndex].value;

var jvalObj =  new Array()
jvalObj[0]="Empty";
jvalObj[1]="email#1"; 
jvalObj[2]="email#2"; 
jvalObj[3]="email#3"; 
jvalObj[4]="email#4"; 
jvalObj[5]="email#5"; 
jvalObj[6]="email#6"; 
jvalObj[7]="email#7"; 
jvalObj[8]="email#8"; 
jvalObj[9]="email#9";

    for(i=0; i<selOpts.options.length; i++;)            
        if (recValue.value=="Benefits")
            {valObj.value = jvalObj[1].value; break;}

        if (selOpts.options[i].selected==true)
            {valObj.value  = jvalObj[2].value; break;}

        if (selOpts.options[i].selected==true)
            {valObj.value  = jvalObj[2].value; break;}

        if (selOpts.options[i].selected==true)
            {valObj.value  = jvalObj[3].value; break;}

        if (selOpts.options[i].selected==true)
            {valObj.value = jvalObj[4].value; break;}

        if (selOpts.options[i].selected==true)
            {valObj.value = jvalObj[5].value; break;}

        if (selOpts.options[i].selected==true)
            {valObj.value  = jvalObj[6].value; break;}

        if (selOpts.options[i].selected==true)
            {valObj.value = jvalObj[7].value; break;}

        if (selOpts.options[i].selected==true)
            {valObj.value = jvalObj[8].value; break;}

        if (selOpts.options[i].selected==true)
            {valObj.value = jvalObj[3].value; break;}

        if (selOpts.options[i].selected==true)
            {valObj.value = jvalObj[2].value; break;}

        if (selOpts.options[i].selected==true)
            {valObj.value = jvalObj[9].value; break;}
       }    
}</script>
</head>
<body>

<form action="/cgi-bin/formmail" method="post" >
    <td width=255 valign=top style='width:191.25pt;padding:0pt 0pt 0pt 0pt'>
    <select onChange="javascript:emails();"
" id="Concerning">
                    <option value="">
            <option value="Benefits">Benefits
            <option value="Customer_Service">Customer Service
            <option value="Employee_Paperwork">Employee Paperwork
            <option value="Human_Resources"> Human Resources
            <option value="Open_Positions">Open Positions
            <option value="Payroll">Payroll
            <option value="Quote_Request">Quote Request
            <option value="Safety">Safety
            <option value="Technical_Support">Technical Support
            <option value="Training">Training
            <option value="Unemployment">Unemployment
            <option value="Workers_Compensation">Workers' Compensation
    </select>
    </td>

    <input TYPE="hidden" NAME="recipient" VALUE="">
    <input TYPE="hidden" NAME="subject" VALUE="Contact Form">
    <input TYPE="hidden" NAME="email" VALUE="postmaster@company.com">
    <input TYPE="hidden" NAME="required" VALUE="Name,Phone,Email,Concerning,Comments">


  </form></body>
</html>

Answer 1

现在我终于明白了，这应该可以解决问题。

document.getElementById('Concerning').onchange = function() { 
    var myArray = ["Empty", 
                   "email#1", 
                   "email#2", 
                   "email#3", 
                   "email#4", 
                   "email#5", 
                   "email#6", 
                   "email#7", 
                   "email#8", 
                   "email#9"];

    document.getElementsByName('recipient')[0].value = myArray[this.selectedIndex];
};

虽然我可能会做这样的事情，因为它要短得多：

document.getElementsByName('recipient')[0].value = 'email#' + this.selectedIndex;

我认为这比制作它简单得多。如果我正确地解释您的代码，您要做的就是获取列表的选定值并将其粘贴到隐藏的输入recipient中。在这种情况下，您可以将this传递给onChange声明。新选择的值将是该列表的值。最后，获取隐藏的输入并在那里设置值。

http://jsfiddle.net/pvvQd/

<select onChange="emails(this);" id="Concerning">

在此代码中，函数emails接受单个参数。我们将this传递给该参数，即选择列表。您在原始代码中错误地使用了getElementsByName。这将返回具有该名称的元素数组（因为每个页面的名称不唯一）。所以假设只有一个我们检索零索引。你可能应该给该字段一个id，然后通过它来检索它。最后，我们将隐藏字段值设置为选择列表的值。

function emails(elem) {
    //you should probably give this an id and retrieve using that instead
    var recipients = document.getElementsByName('recipient')[0];
    recipients.value = elem.value;
}

实际上，如果你想让这个超短，你可以这样做：

http://jsfiddle.net/pvvQd/1/

我建议您远离内联JavaScript声明。相反，你可以做这样的事情。这样你的代码和HTML就不会交织在一起。

http://jsfiddle.net/pvvQd/2/

document.getElementById('Concerning').onchange = function() { 
    document.getElementsByName('recipient')[0].value = this.value;
};

Answer 2

我认为你有一个cut-n-paste错误。 document.getElementsById应为document.getElementById，因为它只会抓取一个元素。

额外的" <select onChange="javascript:emails();" " id="Concerning">也应该是<select onChange="javascript:emails();" id="Concerning">

另外，onChange onChange="emails();"应该"javascript:"不需要添加valObj.value

尝试更改输入以获得ID值，而不仅仅是使用document.getElementsByName（它返回一个数组，以及为什么valObj[0].value =分配失败，因为它应该是document.getElementById("recipient")）你可以使用recValue

您还要检查if (recValue.value=="Benefits")此处recValue == "Benefits"的值当该变量已经是值时，它应该是{{1}}。

您不需要遍历所有元素，因为您已经拥有所选索引，并且可以仅使用该单个值。循环只是矫枉过正。不确定你想在那里实现什么。

Answer 3

建议修改原始源代码，请参阅编辑注释。

function emails()
{
    var valObj = document.getElementsByName("recipient").value;
    var selOpts = document.getElementsById("Concerning");
    var selIndex = selOpts.selectedIndex;
    var recValue = selOpts.options[selIndex].value;

    /*Since the array will assing default integer indices where keys don't exist
      we can rewrite the array as follows to spare redundant write access to it*/
    var jvalObj =  new Array("Empty", "email#1", "email#2", "email#3", "email#4", 
                             "email#5", "email#6", "email#7", "email#8", "email#9");

    for(i=0; i<selOpts.options.length; i++){                        
            if (recValue.value=="Benefits"){
                    valObj.value = jvalObj[1].value;
                    i = selOpts.options.length;

            /*Each of the deleted conditionals used the same comparison which means 
              that they will never meet their criteria without first meeting this 
              conditional, which was set to break the loop*/
            }else if (selOpts.options[i].selected==true){
                    valObj.value  = jvalObj[i].value;

                    /*Personal preference: unless you're bound to the use of break I'd leave use i = len
                      - the exception being where you'd want to retain i of course
                    */
                    i = selOpts.options.length;
            }
    }

html

<!-- DOM events carry out javascript callbacks by default -->
<select onChange="emails();" id="Concerning">

Answer 4

<!DOCTYPE html>
<html lang="eng"> 
<head>
<script type="text/javascript">
function emails()
{
    var recipient = document.getElementById("recipient");
    var concerning = document.getElementById("Concerning");

    var recipientEmailToSet = concerning.options[concerning.selectedIndex].value;

    recipient.value  = recipientEmailToSet; 

    //Remove next line for alert to go away
    alert(recipient.value);
}
</script>
</head>
<body>

<form action="/cgi-bin/formmail" method="post" >
    <td width=255 valign=top style='width:191.25pt;padding:0pt 0pt 0pt 0pt'>
        <select onChange="emails();" id="Concerning">
            <option value=""></option>
            <option value="email#1">Benefits</option>
            <option value="email#2">Customer Service</option>
            <option value="email#3">Employee Paperwork</option>
            <option value="email#4"> Human Resources</option>
            <option value="email#5">Open Positions</option>
            <option value="email#6">Payroll</option>
            <option value="email#7">Quote Request</option>
            <option value="email#8">Safety</option>
            <option value="email#9">Technical Support</option>
            <option value="email#10">Training</option>
            <option value="email#11">Unemployment</option>
            <option value="email#12">Workers' Compensation</option>
        </select>
    </td>

    <input TYPE="hidden" id="recipient" VALUE="" />
    <input TYPE="hidden" id="subject" VALUE="Contact Form" />
    <input TYPE="hidden" id="email" VALUE="postmaster@company.com" />
    <input TYPE="hidden" id="required" VALUE="Name,Phone,Email,Concerning,Comments" />


  </form>
</body>
</html>

select onChange事件触发从数组值填充隐藏输入值的javascript

4 个答案: