Question

我有一个带有三个选项和三个段落的select，每个都有一个匹配这三个选项值的css类。我需要只显示带有所选css类的段落并隐藏其他两个.. 这就是我想象的工作

jQuery(document).ready(function() { 
    if(jQuery("#my_select option[value='Option one']:selected")){
        jQuery(".option_two").hide();
        jQuery(".option_three").hide();
        jQuery(".option_one").slideDown();
    }


    else if(jQuery("#my_select option[value='Option two']:selected")){
        jQuery(".option_two").slideDown();
        jQuery(".option_three").hide();
        jQuery(".option_one").hide();
    }

    else if(jQuery("#my_select option[value='Option three']:selected")){
        jQuery(".option_two").hide();
        jQuery(".option_three").slideDown();
        jQuery(".option_one").hide();
    }

}）;

和html

<select id="my_select" name="my_select">
<option value="Option one" selected="selected">Option one</option>
<option value="Option two">Option two</option>
<option value="Option three">Option three</option>

<p class="option_one">Option one</p>
<p class="option_two">Option two</p>
<p class="option_three">Option three</p>

http://jsfiddle.net/aUeTb/1/

Answer 1

<强>已更新

假设您拥有与<p>相同数量的<option>代码，我们会选择所选<option>的索引编号，并使用eq()仅显示<p>与<option>具有相同的索引号。

$('#my_select').change(function() {
    var x = $(this).find('option:selected').index();
    $('p').hide().eq(x).slideDown();
}).change();

检查http://jsfiddle.net/aUeTb/19/

处的工作示例

Answer 2

您还可以将值的映射存储到数组中的类：

function updateSelection() {
    var opts = [
        ['Option one', '.option_one'],
        ['Option two', '.option_two'],
        ['Option three', '.option_three']
       ];
    var selected = $("#my_select > option:selected").attr('value');
    for (var i=0; i<opts.length; i++) {
        if (opts[i][0] == selected) {
            $(opts[i][1]).slideDown();
        } else {
            $(opts[i][1]).hide();
        }
    }
}

$(function() {
    $("#my_select").change(updateSelection);
    updateSelection();
});

jQuery noob ..需要一些帮助选择选项

2 个答案:

检查http://jsfiddle.net/aUeTb/19/