当前位置： 文江博客 话题详情

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

发布于 2024-12-29 21:40:25 字数 3554 浏览 0 评论 0 原文

我在网上进行了大量研究才发现此代码失败:( 我有一个选择列表，其中包含 onchange 事件“emails()”。当选择某个索引值时，我让 javascript 拉取一个数组我知道一点 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="[email protected]">
    <input TYPE="hidden" NAME="required" VALUE="Name,Phone,Email,Concerning,Comments">


  </form></body>
</html>
原文

I've done a ton of research over the net to come to this code failure :( I have a select list that has an onchange event "emails()". When a certain index value is chosen, I have the javascript pull an array value to populate the "recipient" INPUT value. I know a little javascript, but not enough apparently. Any help would be great, thanks in advance and I apologize if this post isn't "forum correct" it's my first one :)

<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="[email protected]">
    <input TYPE="hidden" NAME="required" VALUE="Name,Phone,Email,Concerning,Comments">


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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（4）

七堇年 2025-01-05 21:40:25

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

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 并通过该 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;
};

Now that I finally get it, this should do the trick.

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

Although I might do something like this instead because it is a lot shorter:

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

I think this is a whole lot simpler than you are making it. If I am interpreting your code correctly, all you want to do is take the selected value of the list and stick it into the hidden input recipient. In that case you can pass this to the onChange declaration. The new selected value will be the value of that list. Finally, get the hidden input and set the value there.

http://jsfiddle.net/pvvQd/

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

In this code the function emails accepts a single parameter. We pass this to that parameter which is the select list. You used getElementsByName incorrectly in your original code. This returns an array of elements with that name (as name isn't unique per page). So assuming there is only one we retrieve the zero index. You should probably give that field an id and retrieve it by that instead. Finally we just set the hidden fields value to the select list's value.

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

Actually, if you wanted to make this super short you could do:

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

I would encourage you to stay away from inline javascript declarations. Instead you can do something like this. That way your code and html are not intertwined.

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

document.getElementById('Concerning').onchange = function() { 
    document.getElementsByName('recipient')[0].value = this.value;
};
回复 原文
守护在此方 2025-01-05 21:40:25

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

还有一个错误，额外的 "

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

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

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

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

I think you have a cut-n-paste error. document.getElementsById should be document.getElementById as it only grabs a single element.

There is also an error with an extra " <select onChange="javascript:emails();" " id="Concerning"> should be <select onChange="javascript:emails();" id="Concerning">

Also you onChange should just be onChange="emails();" don't need to add "javascript:"

Try changing inputs to have an ID value not just name that way instead of using document.getElementsByName (which returns an array and why your valObj.value assignment fails as it should be valObj[0].value = ) you can use document.getElementById("recipient")

You are also checking for the value of recValue here if (recValue.value=="Benefits")
when that variable is already the value so it should be recValue == "Benefits".

You don't need to go through all of the element as you already have the selected index and could just act off of that single value. The loop is just overkill. Not certain what you are trying to achieve there.

回复 原文
始于初秋 2025-01-05 21:40:25

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

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

Suggested edits to the original source code, see comments for edits.

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

The html

<!-- DOM events carry out javascript callbacks by default -->
<select onChange="emails();" id="Concerning">
回复 原文
天涯沦落人 2025-01-05 21:40:25 
<!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="[email protected]" />
    <input TYPE="hidden" id="required" VALUE="Name,Phone,Email,Concerning,Comments" />


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

<!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="[email protected]" />
    <input TYPE="hidden" id="required" VALUE="Name,Phone,Email,Concerning,Comments" />


  </form>
</body>
</html>
回复 原文
~没有更多了~

关于作者

も让我眼熟你

暂无简介

文章
评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

我一直都在从未离去

文章 0 评论 0

fangs

文章 0 评论 0

朱染

文章 0 评论 0

zhangcx

文章 0 评论 0

Willy

文章 0 评论 0

taohaoge

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文