Question

 <select name="cart" id="cart">
    <option value="1" selected="selected">visa</option>
    <option value="2">master</option>
    <option value="3">american</option>
 </select>

我希望如果签证选择我的div＃parent1是显示其他div是hide。我的jquery代码

           $("#parent1,#parent2,#parent3").css("display","none"); 
           $("select").change(function() {
                if ($("select").val() == "1") {
                    $("#parent1").slideDown("fast"); //Slide Down Effect   
                    //$("#parent2,#parent3").css("display","none");

                 }
     });

Answer 1

这是我将如何做到的：

添加一个类＆＃34; .cart-details＆＃34;到你的＃父母＆＃39;元素，以便您可以一次性定位它们。然后，您还可以通过init上的css将它们全部隐藏起来。
在更改时，将所有内容隐藏起来，并使用$("#parent" + this.value)
在绑定后触发更改事件，以便获得初始设置

标记：

注意：我已将ID更改为＆＃34; card1，card2 ...＆＃34;因为它更清楚，但任何ID都可以

<select name="cart" id="cart">
    <option value="1" selected="selected">visa</option>
    <option value="2">master</option>
    <option value="3">american</option>
 </select>
<div class="cart-details" id="cart1">Visa</div>
<div class="cart-details" id="cart2">Mastercard</div>
<div class="cart-details" id="cart3">American</div>

以下是代码：

$("select").change(function() {
    // get the selected value
    var val = this.value;
    // hide all cart detail div
    $('.cart-details').hide();
    // show the one corresponding to the selected item
    $("#cart" + val).slideDown("fast");
})
// trigger the change event so the initial value is taken into account
.change();

<强> DEMO

Answer 2

类似的东西：


$("#parent1,#parent2,#parent3").css("display","none"); 
$("select").change(function() {
    $("div[id^='parent']").hide();
    $("div[id='parent"+$(this).val()+"']").fadeIn("fast");
});

更改选择列表框中的默认选项隐藏显示元素

2 个答案: