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 +"," + ""); 
     }); 
    }) 

});