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 的“str”，在#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。如果用户随后切换到 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');