3

複数の選択肢があるドロップダウンメニューがあります。それぞれにオプション値があります。これらのうち 3 つを選択すると、ボックスの右側にテキストが表示されるはずです。ここまでは順調ですね。

私の問題は、これら3つだけを選択してテキストを表示し、残りを何も表示しないようにすることです。問題は、 を使用して 2 つを動作させることができることですが!== 'value1' && 'value2'、これら 3 つだけを選択する最善の方法がわかりません。

これが私のコードです：

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

痛みの世界から抜け出して、次のことをしてみませんか。

$('#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 に答える
1

まず、この条件は適切な構文ではありません 

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

察するに

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

elseif2 つ目は、複数の 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 に答える
0

複数の条件で遊ぶことができ（ケースに参加したり、ブレークで遊んだりすることもできます）、まさにあなたが探していたデフォルトのケースもあるので、スイッチ構造を使用するのが最善の方法だと思います。

$('#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').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 に答える
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 
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 に答える