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>

这些选项的值是我用作网址的'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');

如果用户第一次选择，则可以。通过select / options更改一些变量后，'str'会更新为正确的值。唯一不起作用的是当用户选择他之前已经选择的东西时。如果他这样做，'str'不会更新。

例如，用户选择Blue，Moon，2000，'str'就像blue-moon-2000一样输出。如果用户然后切换到红色，月亮，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');

Javascript - 更改选择框的值只更新一次字符串

1 个答案: