3

我有一个包含多个选择的下拉菜单。每个都有一个选项值。When three of these are selected, I'm supposed to have some text show up to the right of the box. 到目前为止，一切都很好。

我的问题是只选择这三个来显示文本，其余的什么都不显示。问题是我可以使用 来让其中两个工作!== 'value1' && 'value2'，但我不知道只选择这三个的最佳方法。

这是我的代码：

HTML

<select id="award-type">
     <option value="">choose one</option>
     <option value="award1">Award 1</option>
     <option value="award2">Award 2</option>
     <option value="award3">Award 3</option>
     <option value="award4">Award 4</option>
     <option value="award5">Award 5</option>
     <option value="award6">Award 6</option>
</select>
  <div class="award-text"></div>

和JS：

function dropDownSelect() {
    $('#award-type').on('change', function (e) {

        var selectValue = $(this).val();

        if (selectValue == 'award1') {
            $('.award-text').show().text("you won award 1");
        }
        if (selectValue == 'award2') {
            $('.award-text').show().text("you won award 2");
        }

        if (selectValue == 'award3') {
            $('.award-text').show().text("you won award 3");
        }
        else if (selectValue !== 'award1' && 'award2' && 'award3') {
            $('.award-text').show().text(" ");
        }

    });
}

任何想法将不胜感激！

4

7 回答 7

1

首先删除function dropDownSelect() 并替换为$(function() {

要解决错误，您必须这样做：

else if (selectValue != 'award1' && selectValue != 'award2' && selectValue != 'award3')

这是完整的代码

$(function() {
  $('#award-type').on('change', function(e) {
   var selectValue = $(this).val();

   if (selectValue == 'award1') {
    $('.award-text').show().text("you won award 1");
   }else if (selectValue == 'award2') {
    $('.award-text').show().text("you won award 2");
   }else if (selectValue == 'award3') {
    $('.award-text').show().text("you won award 3");
   }else{
    $('.award-text').show().text(" ");
   }
  });
 });

不要忘记包含 jQuery 库：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

于 2013-06-13T18:59:21.533 回答
1

首先，这个条件不是正确的语法 

selectValue !== 'award1' && 'award2' && 'award3'

应该是

selectValue !== 'award1' && selectValue !== 'award2' && selectValue !== 'award3'

其次，你为什么不写一个简单elseif的而不是多个 if 语句

function dropDownSelect() {
    $('#award-type').on('change', function (e) {

        var selectValue = $(this).val(),
            $text = $('.award-text'); // cache selector
        if (selectValue == 'award1') {
            $text.show().text("you won award 1");
        } else if (selectValue == 'award2') {
            $text.show().text("you won award 2");
        } else if (selectValue == 'award3') {
            $text.show().text("you won award 3");
        } else {
            $text.hide();
        }
    });
}

$('#award-type').on('change', dropDownSelect).change();

工作小提琴

于 2013-06-13T18:55:20.197 回答
1

你为什么不为自己拯救一个痛苦的世界，然后这样做：

$('#award-type').change(function() {
    var award = $(this).find('option:selected').attr('data-award');
    $('.award-text').show().text( award ? "you won award "+award : '' );
});

...并更改您的 HTML 以在每个选项上包含一个 data-award 属性：

<select id="award-type">
    <option value="">choose one</option>
    <option value="award1" data-award="1">Award 1</option>
    <option value="award2" data-award="2">Award 2</option>
    <option value="award3" data-award="3">Award 3</option>
    <option value="award4" data-award="">Award 4</option>
    <option value="award5" data-award="">Award 5</option>
    <option value="award6" data-award="">Award 6</option>
</select>
<div class="award-text"></div>
于 2013-06-13T19:10:26.543 回答
0 
function dropDownSelect() {
    $('#award-type').on('change', function (e) {

        var selectValue = $(this).val();

        if (selectValue != 'award1') {
            $('.award-text').show().text("you won award 1");
        }
        if (selectValue == 'award2') {
            $('.award-text').show().text("you\ won award 2");
        }

        if (selectValue == 'award3') {
            $('.award-text').show().text("you won award 3");
        }
        else if (selectValue !== 'award1' && 'award2' && 'award3') {
            $('.awad-text').show().text(" ");
        }

    });
}
于 2013-06-13T18:55:05.103 回答
0

我认为最好的方法是使用 switch 结构，因为您可以玩多个条件（您也可以加入案例和/或玩休息），并且您还有一个 -默认案例，正是您正在寻找的。

$('#award-type').change(function () {

    switch ($('#award-type').val()) {
            case "award1":
                $('.award-text').text("you won award 1");
                break;
            case "award2":
                $('.award-text').text("you won award 2");
                break;
            case "award3":
                $('.award-text').text("you won award 3");
                break;
            default:
                $(".award-text").text(" ");
        }
    return true;
    });

小提琴：http : //jsfiddle.net/egorbatik/WGFNA/8/

于 2013-06-13T20:25:48.460 回答
0

试试这个：它工作正常：-

$('#award-type').on('change', function (e) {

var selectValue = $(this).val();
if (selectValue === 'award1' || selectValue ==='award2' || selectValue ==='award3') {

    $('.award-text').show().text($('#award-type :selected').text());
}
else {
    $('.award-text').show().text("nothing");
}

});
于 2013-06-13T19:43:04.187 回答
0

为简单起见，我个人建议：

$('#award-type').change(function(){
    var self = $(this),
        opt = self.find('option:selected'),
        index = opt.index(),
        v = opt.text();

    self.next('.award-text').text(function(){
        return index > 0 && index < 4 ? 'You won ' + v : '';
    });
});

JS 小提琴演示。

参考：

于 2013-06-13T19:34:22.980 回答