4 выбора должны быть записаны в текстовое поле при каждом правильном изменении

Question

Загружена моя библиотека jq jq_min_3.1.1.js. Если дело, брозер IE11. мой скрипт находится чуть ниже формы в html body.

Что мне нужно: Последнее состояние 4-х выборов должно быть записано в текстовое поле сразу после каждое изменение в любом из вариантов.

мое испытание последнее состояние:

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

Каждый выбор имеет <option value="">select</option> общего. например A | - | X | - средства, выбор 2 & 4 не были выбраны или был сделан повторный выбор для отмены предыдущего выбора (не для выбора).

Очень важно, что если Вариант1 был выбран в качестве , но затем выбран в качестве выберите (не выбрано); то текстовое поле должно измениться к -

Я нормально с PHP, но я не знаю, JQuery. Код ниже - это адаптация из кодов, которые я нашел из SO. Я сделал F12, и консоль не выдала никаких ошибок, однако моя текстовая область пуста.

То, что я пробовал, приведено ниже. Кажется, что $imploded = $arr_out.join(' | '); не задано, так как $ arr_out в этой точке не задано. (консольный журнал в этой точке ничего не дает).

Что не так? Почему это неправильно? Будет ли решение быть crossbrowser, если библиотека 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 +"," + ""); 
     }); 
    }) 

});