select onChange事件触发javascript，从数组值中填充隐藏的Input值

select onChange event triggers javascript that populates hidden Input value from an array value

本文关键字：填充 隐藏 Input 数组 事件 onChange javascript select      更新时间：2023-09-26

我在网上做了大量的研究来解决这个代码故障：（我有一个选择列表，其中有一个onchange事件"emails（）"。当选择某个索引值时，我让javascript拉一个数组值来填充"receiver"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>

现在我终于得到了它，这应该就成功了。

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

我认为您有一个剪切-粘贴错误。document.getElementsById应该是document.getElementById，因为它只获取单个元素。

另外还有一个错误，额外的" <select onChange="javascript:emails();" " id="Concerning">应该是<select onChange="javascript:emails();" id="Concerning">

此外，onChange应该只是onChange="emails();"，不需要添加"javascript:"

尝试将输入更改为具有ID值，而不仅仅是名称，而不是使用document.getElementsByName（它返回一个数组以及valObj.value分配失败的原因，因为它应该是valObj[0].value =）您可以使用document.getElementById("recipient")

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

您不需要遍历所有元素，因为您已经有了选定的索引，并且可以根据单个值进行操作。这个循环太夸张了。不确定你想在那里实现什么。

建议对原始源代码进行编辑，请参阅注释进行编辑。

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

<!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>
相关文章：