每次更改时应将 4 个选择正确写入文本区域

Question

我加载的 jq 库是 jq_min_3.1.1.js。如果重要的话，兄弟是IE11。我的脚本就在 html 正文中的表格下方。

我需要的是：4 个 select 离子的最后状态应该在 任何 select 离子发生变化后立即写入文本区域 .

我的试用最后状态：

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

每个 select 离子有 <option value="">select</option> 个共同点。例如 A | - | X | - 意味着，selection 2 和 4 未被 selected 或 reselection 是为了中止先前的 selection（不是 select).

重要的是，如果 selection1 被 selected 为 A，但随后 selected 为 select（没有selection）；然后文本区域应该从 A 更改为 -

我对 PHP 没问题，但我不知道 jquery。下面的代码改编自我从 SO 中找到的代码。我按了 F12，控制台没有给出错误，但是我的文本区域是空的。

下面是我试过的。似乎 $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 +"," + "" );
        });
    })

});

每次更改时应将 4 个选择正确写入文本区域

4 selections should be written into the textarea on each change properly

jquery

select

textarea

onchange