Question

我有一个包含多个选项的下拉菜单。每个都有一个选项值。当选择其中三个时，我应该在框的右侧显示一些文本。到现在为止还挺好。

我的问题是只选择那三个来显示文本，其余的则不显示任何内容。问题是我可以使用!== '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(" ");
        }

    });
}

任何想法都将不胜感激！

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

<强> Working Fiddle

Answer 2

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

Answer 3

为什么不为自己拯救一个痛苦的世界呢？

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

...并更改HTML以在每个选项中包含数据奖励属性：

<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>

Answer 4

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

    });
}

Answer 5

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

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

参考文献：

Answer 6

试试这个：工作正常： -

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

});

Answer 7

我认为最好的方法是使用开关结构，因为你可以玩多种条件（你也可以加入案例和/或玩休息）你还有一个 - 默认的情况，正是你要找的。

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

FIDDLE：http://jsfiddle.net/egorbatik/WGFNA/8/

下拉菜单中有多个属性选择器？

7 个答案:

试试这个：工作正常： -