Question

我正在使用Jquery 1.6。我有一个下拉列表，其中包含许多选项。

我正在尝试根据下拉列表的值让我的下拉隐藏div。

如果我从下拉列表“选项1.8”中选择，我希望它查看value属性，并根据值中的最后三个字符查找以相同字符结尾的所有div类并隐藏它们。

下面的脚本有效，但问题是我想要它，以便我的下拉列表中的“值”不必与我在html中的类名相同。这就是我希望它找到值的最后部分的原因。

<script type='text/javascript'>
$(window).load(function(){
$("#version-select").bind("change", function() {
    $("div").filter('.' + this.value).show().siblings().hide();
});
});  
</script>


<select name="version-select" id="version-select">
    <option value="option_1_6">Option 1.6</option>
    <option value="option_1_7">Option 1.7</option>
    <option value="option_1_8">Option 1.8</option>
    <option value="option_2_0">Option 2.0</option>
</select>

<div class="class_1_6">
<img src="my_path/to/my_images"/>
<p>some text</p>
</div>

<div class="table_info_1_7">
<img src="my_path/to/my_images"/>
<p>some text</p>
</div>

<div class="class_1_8">
<img src="my_path/to/my_images"/>
<p>some text</p>
</div>

根据我在下拉列表中选择的选项，让它找到值的最后一部分的任何帮助都会有所帮助。

Answer 1

检查fiddle。我使用过jqueryEndsWithSelector。

$('#version-select').change(function(){
    var val = $(this).val();
    var lastThreeChars = val.substring(val.length - 3);
    $('div').hide();
    $('div[class$="' + lastThreeChars + '"]').show();
});

Answer 2

尝试使用以下内容：

$(function(){   
    $("#version-select").bind("change", function() {
        var value = $(this).find("option:selected").val();
        var last3chars = value.substring( value.length - 3)
        $("div").hide();
        $(".class_" + last3chars).show();
    });
});

观看演示：http://jsfiddle.net/7YSPS/2/

使用jquery基于下拉选择过滤div类

2 个答案: