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 divの中に出力を取得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'); 

ユーザーが最初に選択した場合、それが動作します。 select/optionsでいくつかの変数を変更すると、 'str'が正しい値に更新されます。唯一うまくいかないのは、ユーザーが既に選択したものを選択したときだけです。もしそうなら、 'str'は更新されません。

たとえば、ユーザーがBlue、Moon、2000を選択すると、 'str'はblue-moon-2000のように出力されます。ユーザーがRed、Moon、2000に切り替えると、 'str'はred-moon-2000に更新されます。ここまでは順調ですね。その後、彼が心を変えてBlueを再び選択すると、「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');