根据下拉值显示 Div 元素的数量 [重复]答案

【问题标题】：Display number of Div Elements based on dropdown-value [duplicate]根据下拉值显示 Div 元素的数量 [重复]
【发布时间】：2015-02-17 05:43:10
【问题描述】：

我有 4 个 Div 元素和一个下拉菜单。如果我选择“2”之类的下拉选项，则会显示 DivElement2 而隐藏所有其他选项。

我想改变它，这样当我选择选项“2”时，DivElement1 和 DivElement2 都会显示。我有这个需要使用的脚本，但它并不完全有效：

$(".DropdownClass").chosen({
    inherit_select_classes: true,
    disable_search: true
}).change(function (e, params) {
    if ($(this).attr('name') == 'Count') {
        $('.CommonAttribute').hide();
        $('.CommonAttribute:lt(' + $(this).val() + ')').show();
    }
});

这是jsFiddle

【问题讨论】：

什么垃圾选择。？没有你的代码工作正常。 jsfiddle.net/Hk87V/3

标签： jquery

【解决方案1】：

你需要像这样.slice()他们：

http://jsfiddle.net/skip405/Hk87V/8/

【讨论】：

【解决方案2】：

当您在代码中包含choosen.js 和css 时，它可以完美运行。这是jsFiddle 和完整代码：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
  <script type='text/javascript' src='//code.jquery.com/jquery-1.10.1.js'></script>
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">
      <script type='text/javascript' src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.js"></script>
    <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.css">
  <style type='text/css'>
  </style>
<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$(".DropdownClass").chosen().change(function (e, params) {
    if ($(this).attr('name') == 'Count') {
        $('.CommonAttribute').hide();
        $('.CommonAttribute:lt(' + $(this).val() + ')').show();
    }
});
});//]]>      
</script>
</head>
<body>
  <select class="DropdownClass" name="Count" id="selectModelNumber">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>
<div class="CommonAttribute DivElement1">Div1</div>
<div class="CommonAttribute DivElement1">Div2</div>
<div class="CommonAttribute DivElement1">Div3</div>
<div class="CommonAttribute DivElement1">Div4</div>
</body>
</html>

【讨论】：

【解决方案3】：

你可以这样做

$(".DropdownClass").change(function (e, params) {
    var count=parseInt($(this).val());
    $(".CommonAttribute").show();
    $(".CommonAttribute:gt("+(count-1)+")").hide();
});

Demo

【讨论】：

【解决方案4】：

试试这个

  var catchDome = $("div.CommonAttribute");
 catchDome.hide();
 catchDome.eq(0).show();
 $(".DropdownClass").change(function () {
     catchDome.hide();
     catchDome.eq(this.value - 1).show();

 });

DEMO

或者你想根据选项选择显示多少元素

$(".DropdownClass").change(function () {

    $('.CommonAttribute').hide();
    $('.CommonAttribute:lt(' + this.value + ')').show();

});

UPDATED DEMO

【讨论】：

【解决方案5】：

你能访问这个小提琴链接吗，你会得到你期望的结果。

$(".DropdownClass").chosen().change(function (e, params) {
if ($(this).attr('name') == 'Count') {
    $('.CommonAttribute').hide();
    $('.DivElement'+$(this).val()).show();
}
});

http://jsfiddle.net/Hk87V/27/

【讨论】：