選擇onChange事件觸發器填充隱藏輸入值從一個數組的價值

我已經做了大量的網絡研究來到這個代碼失敗:(我有一個選擇列表，有一個onchange事件「電子郵件（）當我選擇一個特定的索引值時，我有一個javascript拉數組的值來填充「收件人」的INPUT值，我知道一點javascript，但是顯然不夠用，任何幫助都會很棒，在此先感謝，我道歉如果這個職位是不是「論壇正確的」這是我第一個現在:)選擇onChange事件觸發器填充隱藏輸入值從一個數組的價值

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

來源

2012-01-31 SimpleHelp

認爲你有一個切正粘貼錯誤。 document.getElementsById應該是document.getElementById，因爲它只獲取一個元素。 – scrappedcola 2012-01-31 21:45:02

你也onChange應該只是onChange =「emails（）;」不需要添加「javascript：」 – scrappedcola 2012-01-31 21:45:57

，我終於明白了，這應該做的伎倆。

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

來源

2012-01-31 21:53:06 mrtsherman

感謝您的回覆，但不是我要找的。根據從「選擇」列表中選擇的內容，我將從數組中拉取相關電子郵件（jvalObj）以填充隱藏的「收件人」字段。我知道javascript可以放在onchange中，但我寧願沒有電子郵件作爲選擇值。 – SimpleHelp 2012-01-31 21:59:59

@ user1181400 - 啊，我現在看到了。對不起，我錯過了。看到這個 - http://jsfiddle.net/pvvQd/3/ – mrtsherman 2012-01-31 22:11:24

第一個是我想要的，我可以將數組中的值數量與選擇列表匹配。所以我會有一些電子郵件地址的倍數。一旦我把實際的電子郵件地址，它不會工作。如[email protected]。它在您提供給我的網站中的數組中刪除了引號。 – SimpleHelp 2012-01-31 22:42:30

我認爲你有一個切正粘貼錯誤。 document.getElementsById應該是document.getElementById，因爲它只抓取一個元素。

還有一個錯誤與一個額外的"<select onChange="javascript:emails();" " id="Concerning">應該<select onChange="javascript:emails();" id="Concerning">

你也onChange應該只是onChange="emails();"不需要添加"javascript:"

嘗試改變輸入有一個ID值不只是名字這樣而不是使用文檔。getElementsByName（返回一個數組，爲什麼，因爲它應該是valObj[0].value =您valObj.value分配失敗），可以使用document.getElementById("recipient")

您還檢查的recValue這裏if (recValue.value=="Benefits") 值時，該變量已經值應該是recValue == "Benefits"。

您不需要瀏覽所有元素，因爲您已經擁有選定的索引，並且可以僅使用該單個值。循環只是矯枉過正。不確定你想在那裏實現什麼。

來源

2012-01-31 21:58:39 scrappedcola

mrtsherman將其簡化爲一個數組和兩行代碼對我來說:)是的，它看起來有點過度殺死，或多或少是一種合作我發現的想法。感謝煽動！ – SimpleHelp 2012-02-01 15:05: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">

來源

2012-01-31 22:04:43 CBusBus

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

來源

2012-01-31 22:14:07 Shurgu

選擇onChange事件觸發器填充隱藏輸入值從一個數組的價值

回答

相關問題