Question

我有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

Answer 1

试试这个

  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

Answer 2

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

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

Answer 3

当您在yout代码中包含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>

Answer 4

你可以这样做

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

Demo

Answer 5

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

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

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

根据下拉值显示Div元素的数量

5 个答案:

DEMO

UPDATED DEMO