当用户使用选择框无法正常工作时隐藏和显示div

Question

对于我的网站，我允许用户使用下拉菜单选择各种选项，当他们选择一个选项我有一些应该隐藏的jquery或根据他们选择的显示不同的图片。 但它似乎没有改变。

我创造了一个小提琴，并把一些

在烹饪部分的文本尝试测试它但它仍然无法正常工作。 谁能明白为什么？

http://jsfiddle.net/av7E2/

 $(document).ready(function () {
    $('.box').hide();
    $('#option1').show();
    $('#select-portion').change(function () {
        $('.box').hide();
        $('#'+$(this).val()).show();
    });

});

$(document).ready(function () {
    $('.prepBox').hide();
    $('#option10').show();
    $('#select-prep-time').change(function () {
        $('.prepBox').hide();
        $('#'+$(this).val()).show();
    });

});

$(document).ready(function () {
    $('.cookBox').hide();
    $('#cook1').show();
    $('#select-cook-time').change(function () {
        $('.cookBox').hide();
        $('#'+$(this).val()).show();
    });
    });

Answer 1

按照你的小提琴，select-cook-time是一个类，而不是id值。 因此，您应该使用.select-cook-time代替。 尝试这个

$('.select-cook-time').change(function () {
        $('.cookBox').hide();
        $('#'+$(this).val()).show();
});

Answer 2

我看着你的小提琴。 当您使用.select-part时，您正在使用#select- part。 所有其他下拉列表似乎都有同样的问题。 应用此更改并将调用更改处理程序。

$（'＃select-cook-time'） - > $（'。select-cook-time'）

$（'＃select-prep-time'） - > $（'。select-prep-time'）

$（'＃select-part'） - > $（'。select-part'）

Answer 3

在你的小提琴中，你有class =“select-part”，而在jquery你正在寻找＃not。

Answer 4

在清理了标记中的一些拼写错误并清理jQuery后，我们得到了这个 -

$(document).ready(function () { // one document ready handler (although you can use as many as you'd like, this is just cleaner)
     $('.box, .prepBox, .cookBox').hide(); // combine selectors
     $('#option1, #option10, #cook1').show(); // combine selectors
     $('.select-portion').change(function () { // change to class selector
         $('.box').hide();
         $('#' + $(this).val()).show();
     });
     $('.select-prep-time').change(function () { // change to class selector
         $('.prepBox').hide();
         $('#' + $(this).val()).show();
     });
     $('.select-cook-time').change(function () { // change to class selector
         $('.cookBox').hide();
         $('#' + $(this).val()).show();
     });
 });

你可以在这里看到这个 - http://jsfiddle.net/jayblanchard/av7E2/1/