2012-03-20 11 views
0

私は、選択に依存する部門を表示/非表示にする必要があるプロジェクトを作成しています。jQuery選択ボックスでの表示/非表示 - 動的値

私は私の基礎として、次のコードを使用しています:私の問題は、それらが動的に作成されているとして選択ボックスの値を変更することができないということである

<select> 
    <option value="#divA">a</option> 
    <option value="#divB">b</option> 
</select> 

<div id="divA" class="brandDiv">brand A</div> 
<div id="divB" class="brandDiv">brand B</div> 

<script type="text/javascript"> 
    $(function() { 
     $("select").change(function() { 
      // hide all brands first 
      $("div.brandDiv").hide(); 
      // val is something like #div1 or #div2 
      var targetId = $(this).val(); 
      // show the new selected one 
      $(targetId).show(); 
     }); 
    });   
</script> 

http://jsfiddle.net/rtXLe/で働いて見ることができる)と、何か他のものを参照するので、彼らは次のようになります。それに

<select> 
    <option value="3135">a</option> 
    <option value="3136">b</option> 
</select> 

<div id="3135" class="brandDiv">brand A</div> 
<div id="3136" class="brandDiv">brand B</div> 

を明らかにその後のjQueryによってピックアップすることができない値から欠落しているハッシュタグがあるのに。

部門が機能するためにjQueryで何を変更する必要がありますか?

+0

にこのような何かを追加しますか? var targetId = '#' + $(これ).val(); – mamoo

答えて

2

ここでは、働いている:http://jsfiddle.net/jhRHg/5/

HTML:

<select> 
    <option value="3135">a</option> 
    <option value="3136">b</option> 
</select> 

<div id="3135" class="brandDiv">brand A</div> 
<div id="3136" class="brandDiv">brand B</div> 
​ 

をjQueryの:

$("select").change(function() { 
    // hide all brands first 
    $("div.brandDiv").hide(); 
    // val is something like #div1 or #div2 
    var targetId = $(this).val(); 

    console.log($(targetId).html()); 
    // show the new selected one 
    $("#"+targetId).show(); 
});​ 

これは、歓声を助けます!

0

「#」文字を手動で追加するだけで済みます。

私は、一例として、あなたのjsFiddleを更新しました:

$("select").change(function() { 
    // hide all brands first 
    $("div.brandDiv").hide(); 
    // val is something like #div1 or #div2 
    var targetId = "#" + $(this).val(); // <-- manually appending the # character here 
    console.log($(targetId).html()); 
    // show the new selected one 
    $(targetId).show(); 
});​ 
0

は、なぜあなたはハッシュを追加していけませんか?

var targetId = '#' + $(this).val(); 
0

だけ手動#タグ

<script type="text/javascript"> 
    $(function() { 
     $("select").change(function() { 
      // hide all brands first 
      $("div.brandDiv").hide(); 
      // val is something like #div1 or #div2 
      var targetId = $(this).val(); 
      // show the new selected one 
      $("#"+targetId).show(); 
     }); 
    });   
</script> 
関連する問題