각 변경시 4 개의 선택 항목이 텍스트 영역에 올바르게 작성되어야합니다.

Question

로드 된 내 jq 라이브러리는 jq_min_3.1.1.js입니다. 문제가 있으면 broser는 IE11입니다. 내 스크립트는 html 본문의 양식 바로 아래에 있습니다.

내가 원하는 것은 다음 중 하나입니다. 중 하나가 각각 변경되어 직후에 4 개의 선택 항목 중 마지막 상태가 텍스트 영역에 기록되어야합니다.

평가판 마지막 상태 :

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

각각의 선택이 공통으로 <option value="">select</option>있다. 예를 들어 A | - | X | -은 선택 2 & 4가 선택되지 않았거나 이전 선택 (선택하지 않음)을 중단하기 위해 다시 선택되었음을 의미합니다.

이 (선택 사항 없음)을 선택으로 그것은 selection1 다음 로 선택하지만, 경우 선택하는 것이 중요합니다;

내가 PHP로 확인 해요하지만 난 jQuery를 모르는 - 다음 텍스트 영역은 에서로 변경해야합니다. 아래의 코드는 SO에서 찾은 코드의 변형입니다. 나는 F12를 만들었지 만 콘솔에는 아무런 오류가 없지만 내 텍스트 영역은 비어 있습니다.

내가 시도한 내용은 다음과 같습니다. 그 시점에서 $ arr_out이 설정되지 않았으므로 $imploded = $arr_out.join(' | ');이 설정되지 않은 것으로 보입니다. (그 시점의 콘솔 로그는 아무것도 제공하지 않습니다).

무엇이 잘못 되었나요? 왜 틀렸어? 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 +"," + ""); 
     }); 
    }) 

});