4個選項應該寫入textarea每次更改都正確

Question

我加載的jq庫是jq_min_3.1.1.js。如果有問題，broser是IE11。我的腳本正好在html body中的表單之下。

我需要的是：4選擇的最後一個狀態應寫入之後中的任何一個選項中。

我的審判最後的狀態：

http://jsbin.com/comolifeyo/1/edit?html,js,console,output

每個選擇都有共同<option value="">select</option>。 例如A | - | X | -意味着，選擇2 & 4未被選擇或重新選擇以中止先前的選擇（不選擇）。

重要的是，如果選擇1被選定爲一個，但隨後選定爲選擇（不選擇）;然後textarea的改變應該從一個到-

我確定用PHP，但我不知道的jQuery。下面的代碼是從我從SO發現的代碼改編而來的。我做了F12和控制檯沒有錯誤，但是我的textarea是空的。

我試過的是以下。看起來$imploded = $arr_out.join(' | ');沒有設置，因爲$ arr_out沒有設置。 （在那個點上的控制檯日誌什麼都不給）。

出了什麼問題？爲什麼它錯了？如果jq圖書館沒問題，解決方案是否可以交叉瀏覽？

感謝

<form method="post" action="#" name="myform" id="myform">  
    <select name="select1" id="select1" size="1"> 
     <option value="">select</option> 
     <option value="1">A</option> 
     <option value="2">B</option> 
     <option value="3">C</option> 
    </select> 
    <select name="select2" id="select2" size="1"> 
     <option value="">select</option> 
     <option value="1">q1</option> 
     <option value="2">q2</option> 
     <option value="3">q3</option> 
    </select> 
    <select name="select3" id="select3" size="1"> 
     <option value="">select</option> 
     <option value="1">X</option> 
     <option value="2">Y</option> 
     <option value="3">Z</option> 
    </select> 
    <select name="select4" id="select4" size="1"> 
     <option value="">select</option> 
     <option value="1">q7</option> 
     <option value="2">q8</option> 
     <option value="3">q9</option> 
    </select> 

    <textarea name="first_paste" id="first_paste" disabled></textarea> 

</form> 

<script> 
$(document).ready(function() { 
    var $fields = ['#select1','#select2','#select3','#select4']; 
    var $arr_out = []; 

    $.each($fields, function(key,val) 
    { 

     $(val).change(function() 
     { 
      if($(val).val() === "") 
      { 
       $arr_out[key] = '-'; 
       // console.log($arr_out.join(' | ')); 

      } 
      else 
      { 
       $arr_out[key] = ($(val + ' option:selected').text()); 
       // console.log($arr_out.join(' | ')); 
      } 
     }); 
    }) 
    // console.log($arr_out.join(' | ')); 
    $imploded = $arr_out.join(' | '); 
    $('#first_paste').text($imploded); 

}); 
</script> 

Answer 1

<form method="post" action="#" name="myform" id="myform">  
     <select name="select1" id="select1" size="1"> 
      <option value="" selected="selected">select</option> 
      <option value="1">A</option> 
      <option value="2">B</option> 
      <option value="3">C</option> 
     </select> 
     <select name="select2" id="select2" size="1"> 
      <option value="" selected="selected">select</option> 
      <option value="1">q1</option> 
      <option value="2">q2</option> 
      <option value="3">q3</option> 
     </select> 
     <select name="select3" id="select3" size="1"> 
      <option value="" selected="selected">select</option> 
      <option value="1">X</option> 
      <option value="2">Y</option> 
      <option value="3">Z</option> 
     </select> 
     <select name="select4" id="select4" size="1"> 
      <option value="" selected="selected">select</option> 
      <option value="1">q7</option> 
      <option value="2">q8</option> 
      <option value="3">q9</option> 
     </select> 

     <textarea name="first_paste" id="first_paste" disabled></textarea> 

    </form> 


$(document).ready(function() { 
    var $fields = ['#select1','#select2','#select3','#select4']; 
    var $arr_out = []; 

    $.each($fields, function(key,val) 
    { 
     if($(val).find(":selected").text() == "select"){ 
     console.log($(val).find(':selected').text()); 
     $arr_out[key] = '-'; 
     } 
     $("#first_paste").html($arr_out +"," + ""); 
      console.log(key,val); 
     $(val).change(function() 
     { 
      switch (key) { 
       case 0: 
        if($(val).find(":selected").text() == "select"){ 
         console.log($(val).find(':selected').text()); 
         $arr_out[key] = '-'; 
         break; 
        } 
        else{ 
         $arr_out[key] = $(val).find(":selected").text(); 
         break; 
        } 
       case 1: 
        if($(val).find(":selected").text() == "select"){ 
         console.log($(val).find(':selected').text()); 
         $arr_out[key] = '-'; 
         break; 
        } 
        else{ 
         $arr_out[key] = $(val).find(":selected").text(); 
         break; 
        } 
       case 2: 
        if($(val).find(":selected").text() == "select"){ 
         console.log($(val).find(':selected').text()); 
         $arr_out[key] = '-'; 
         break; 
        } 
        else{ 
         $arr_out[key] = $(val).find(":selected").text(); 
         break; 
        } 
       case 3: 
        if($(val).find(":selected").text() == "select"){ 
         console.log($(val).find(':selected').text()); 
         $arr_out[key] = '-'; 
         break; 
        } 
        else{ 
         $arr_out[key] = $(val).find(":selected").text(); 
         break; 
        } 
      } 
       console.log($arr_out); 
       $("#first_paste").html($arr_out +"," + ""); 
     }); 
    }) 

});