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> 

这些选项我使用的为“海峡”的一个URL，其中获得在#output DIV输出值的：

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。如果用户切换到红色，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');