選択リストボックスのデフォルトオプションを変更して表示要素を非表示にする

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

ような何か：

 

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

Answer 2

は、ここで私はそれを行うだろう方法は次のとおりです。

1. は、あなたの '#parent' にクラス ".cart-詳細" を追加要素をまとめてターゲットにすることができます。また、initのcssを介してそれらをすべて非表示にすることもできます。変更の

2. ので、あなたは、あなたの初期の

マークアップの設定を取得結合後に変更イベントをそれらすべてを隠し、$("#parent" + this.value)

トリガーで正しいものを示しています。

注意を：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