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

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 是隐藏的。我的 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

我会这样做:

1. 将类“.cart-details”添加到“#parent”元素中，以便您可以一次性定位所有元素。然后，您还可以通过 init 上的 css 将它们全部隐藏。

2. 更改时，隐藏所有内容并使用 $("#parent"+ this.value) 显示正确的内容

3. 绑定(bind)后触发更改事件，以便获得初始设置

标记:

注意:我已将 ID 更改为“card1、card2...”，因为这样更清晰，但任何 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