下拉菜单上的多个属性选择器

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

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();

首先去除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>

你为什么不这样做呢:

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

为了简单起见，我个人建议:

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

引用:

• change() .
• find() .
• index() .
• next() .
• text() .

试试这个:它工作得很好:——

$('#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");
}
});

我认为最好的方法是使用切换结构，因为你可以使用多个条件(你也可以加入情况和/或玩休息)，你也有一个-默认情况，正是你正在寻找的。

$('#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/

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(" ");
        }
    });
}