Question

我有一个选择输入下拉列表：

<select class="redblue">
    <option value="Red or Blue?" selected>Red or Blue?</option>
    <option value="RED">RED</option>
    <option value="BLUE">BLUE</option>
</select>

<select class="colorslave">
    <option value="none" selected></option>
    <option value="RED">RED</option>
    <option value="BLUE">BLUE</option>
</select>

每次选择.redblue的颜色时，确认后，.colorslave显示相同的颜色。我需要.redblue来恢复默认值＆＃34;红色或蓝色？＆＃34;确认后，可以是OK或CANCEL。

现在，它只适用于OK - 在CANCEL上，＆＃34;返回false;＆＃34;必须阻止它或其他东西：

$('.redblue').change(function(){
    if($(this).val() == 'RED'){
        var color = confirm("You are about to choose RED.");
        if (color) {
            $('.colorslave').val('RED');
            $('.redblue').val('Red or Blue?');//works
        }
    }else{
        return false;
        $('.redblue').val('Red or Blue?');//doesn't work
    }
});

$('.redblue').change(function(){
    if($(this).val() == 'BLUE'){
        var color = confirm("You are about to choose BLUE.");
        if (color) {
            $('.colorslave').val('BLUE');
            $('.redblue').val('Red or Blue?');//works
        }
    }else{
        return false;
        $('.redblue').val('Red or Blue?');//doesn't work
    }
});

这是FIDDLE。

Answer 1

您在标记为“无法正常工作”的代码行之前立即返回false。当然他们不会执行。

此外，您的代码设计很奇怪，因为您将颜色选择调用视为完全独立的代码块，而它们应该是单个if / else语句。以下代码~~仍然无法正确重置“redblue”下拉列表（我不确定是什么导致了这一点）但是~~有更好的设计：

$('.redblue').change(function(){
    if($(this).val() == 'RED'){
        var color = confirm("You are about to choose RED.");
        if (color) {
            $('.colorslave').val('RED');
            $('.redblue').val('Red or Blue?');
        }else{
            $('.redblue').val('Red or Blue?');
            return false;
        }
    }else if($(this).val() == 'BLUE'){
        var color = confirm("You are about to choose BLUE.");
        if (color) {
            $('.colorslave').val('BLUE');
            $('.redblue').val('Red or Blue?');
        }else if (!color){
            $('.redblue').val('Red or Blue?');
            return false;
        }
    }
});

~~这应该是调试的更好起点。我不是一个jQuery主人，所以我认为还有其他东西阻止了正确的重置，但我认为做出上面做出的改变应该会有所帮助。~~

Answer 2

您尝试在return false之后执行代码。尝试颠倒这两行：

自：

return false;
$('.redblue').val('Red or Blue?');//doesn't work

要：

$('.redblue').val('Red or Blue?');//doesn't work
return false;

Answer 3

我已修复您的问题，您可以看到解决方案here in jsfiddle

$('.redblue').change(function () {
    if ($(this).val() == 'RED') {
        var color = confirm("You are about to choose RED.");
        if (color) {
            $('.colorslave').val('RED');
            $('.redblue').val('Red or Blue?');
        } else {
            $('.redblue').val('Red or Blue?'); //this code doesn't work
        }
    } else if ($(this).val() == 'BLUE') {
        var color2 = confirm("You are about to choose BLUE.");
        if (color2) {
            $('.colorslave').val('BLUE');
            $('.redblue').val('Red or Blue?');
        } else {
            $('.redblue').val('Red or Blue?'); //this code doesn't work
        }
    }
});

基本上问题是你需要在if语句下没有工作的else语句，它确定警报是ok还是取消。

Answer 4

很有效的方法你可以抓住代码使其恢复到句子外的默认值，所以它会是这样的：

$('.redblue').change(function(){
    if($(this).val() == 'RED') {
        var color = confirm("You are about to choose RED.");
        if (color) {
            $('.colorslave').val('RED');
        }
    } else if($(this).val() == 'BLUE') {
        var color = confirm("You are about to choose BLUE.");
        if (color) {
            $('.colorslave').val('BLUE');
        }
    }

    $('.redblue').val('Red or Blue?');
});

更新小提琴：http://jsfiddle.net/76f0qdqn/4/

将特定值设置为jQuery上的Select input返回false？

4 个答案: