Javascript - 선택 상자 값을 한 번만 변경하면 문자열이 한 번만 업데이트됩니다.

Question

사용자가 선택 옵션을 통해 3 가지를 선택해야하는 페이지가 있습니다. 먼저 사용자는 색상, 다음 단어 및 마지막으로 숫자를 선택합니다.

<select name="color" id="color" size="3"> 
    <option value="red">red</option> 
    <option value="blue">blue</option> 
    <option value="green">green</option> 
</select> 
<select name="cos" id="cos" size="3"> 
    <option value="-moon">Moon</option> 
    <option value="-star">Star</option> 
    <option value="-sun">Sun</option> 
</select> 
<select name="year" id="year" size="3"> 
    <option value="-2000">2000</option> 
    <option value="-3000">3000</option> 
    <option value="-4000">4000</option> 
</select> 
<div id="output" class="button"></div> 

값 년대 #output의 사업부에서 출력하세요 URL을 나는 'STR'로 사용하고이 옵션의

: 사용자가 처음 선택

var selectedAllLength = $("select").length; 
$("select").change(function() { 
     var str = location.origin; 
     var selected = $("select option:selected"); 
     var selectedCount = selected.length; 
     if (selectedCount == selectedAllLength) { 
      selected.each(
       function() { 
        str += $(this).attr('value'); 
       } 
      ); 
      $("#output").html('<a href=' + str + '>GO!</a>'); 
     } 
    }) 
    .on('change.select2'); 

경우 작동합니다. 선택/옵션을 통해 일부 변수를 변경하면 'str'이 올바른 값으로 업데이트됩니다. 사용자가 이전에 이미 선택한 항목을 선택하는 경우에만 작동하지 않습니다. 그가하는 경우 'str'업데이트되지 않습니다.

예를 들어, 사용자가 Blue, Moon, 2000을 선택하면 'str'이 blue-moon-2000과 같이 출력됩니다. 그런 다음 사용자가 Red, Moon, 2000으로 전환하면 'str'이 red-moon-2000으로 업데이트됩니다. 여태까지는 그런대로 잘됐다. 그런 다음 마음이 바뀌고 파란색을 다시 선택하면 'str'은 red-moon-2000으로 남습니다.

누구에게이 문제가 발생할 수있는 아이디어가 있습니까? 그리고 그것을 고치는 방법?

Answer 1

JSFiddle에서이 문제를 재현 할 수 없습니다. 내가 상상할 수있는 유일한 차이점은 당신이 실행하고있는 jQuery 버전이거나 다른 js 파일과의 충돌이다.

https://jsfiddle.net/29Lajogk/

나는

var selectedAllLength = $("select").length; 
$("select").change(function() { 
    var str = location.origin; 
    var selected = $("select option:selected"); 
    var selectedCount = selected.length; 
    if(selectedCount == selectedAllLength) { 
     selected.each(
     function() { 
      str += $(this).attr('value');    
     } 
     ); 
     $("#output").html('<a href=' + str + '>GO!</a>'); 
    } 
}) 
.on('change.select2');