option divに異なるidを追加する？

Question

select要素内のオプションに異なるidを追加しようとしています。私は画像でこれを行うが、IDの

例でそれを行う方法を知らないことができます。私たちが使用したイメージのために：

$(document).ready(function() { 
$("#selectanimage").change(function() { 
    var src = $(this).val(); 

    $("#masterPreview").html(src ? "<img src='" + src + "'>" : ""); 
}); 
}); 

を典型的な選択は、次のようになります。

<select id="selectanimage" name="selectanimage" style="width: 474px;" class="required"> 
<option value="null">--- Select your Image ... ---</option> 
<option value="share/images/125x125blk.png">125px x 125px Black Background</option> 
<option value="share/images/125x125wht.png">125px x 125px White Background</option> 
<option value="share/images/180x100blk.png">180px x 100px Black Background</option> 
</select> 

私が欲しいものするには..オプションの値をdifferenct classまたはidに変更し、それに応じてjsを切り替えます。

だから、オプション値=「りんご」 オプション値=「foo」という場合は明らかに100％のthats

イムわからない笑

目的は、本部のIDのmasterpreviewは、新しいクラスまたはIDを含めることができるということですオプションの要素。

ie。オプションのクリックで

（誰かがfooをクリックしたと言う）

その後、我々が生成されます。

<div id="masterPreview"> 
    <div class="foo"></div>  
</div> 

Answer 1

私は（率直に言って、私は疑っている - あなたの質問は非常に混乱して）正しくあなたを理解していればあなたがいます異なるオプションを選択すると異なるdivが表示されるような選択要素が必要だと言っています。

これは、各オプションに表示されるdivのクラス名である値を指定することで実現できると考えています（実際のdivはdivの "masterPreview"にページのどこかに含まれています）さまざまなオプションが選択されたときに対応するdivを非表示にするコードを書く方法を知っています。要件については

私はそれを要約しているとして、私も球場にいるかどうかを確認できるように、ここで働くのデモです：http://jsfiddle.net/abw3T/

それはあなたが何をしたいのような遠隔地だ場合、これがされそれをコーディングする方法：

<style> 
    #masterPreview > div { display: none; } 
</style> 

<select> 
    <option value="none">--Please select--</option> 
    <option value="apple">Apple</option> 
    <option value="banana">Banana</option> 
    <option value="carrot">Carrot</option> 
</select> 
<div id="masterPreview"> 
    <div class="apple">Apple Div</div> 
    <div class="banana">Banana Div</div> 
    <div class="carrot">Carrot Div</div> 
</div> 

<script> 
$("select").change(function(){ 
    $("#masterPreview > div").hide(); 
    $("." + $(this).val()).show(); 
}); 
</script> 

あまりにもそれは本当にありません。現在、そして目に見えるとは一致するクラス名を一つだけが表示される場合がありますmasterPreviewの子div要素のすべてのいずれかが選択非表示のための変更イベントに選択したオプションの値。

注：要素を一意に識別するためにクラスを使用しないでください。これはid属性のためですが、サンプルdivはクラスを使用しています。コードは次のようになり.show()とのラインのための除くIDS でそれを行うにはまったく同じになります：

$("#" + $(this).val()).show() 

Answer 2

私は最善の方法は、その場でのdiv＃1 masterPreview内部<div>を作成することだと思います。

$("select").change(function(){ 
    var option = $(this).val(); 
    if (option == 'none') { 
     $("#masterPreview").empty(); 
    } else { 
     $("#masterPreview").html($('<div />').addClass(option).html(option)); 
    } 
});​ 

デモ：http://jsfiddle.net/abw3T/2/