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

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返回默认值“红色还是蓝色？” 确认后，确定为“确定”或“取消”。

现在，它只能通过OK才能使用-在CANCEL上，“返回false”； 必须阻止它或其他东西：

$('.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

我已经解决了您的问题，您可以在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语句，该if语句确定警报是正常还是取消。

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/