jQuery：2つのドロップダウンリストがあり、画像URLを作成して画像を表示します。

Question

まずはjQueryの新機能です。少しばかげて（私の悪い英語の下に^^）尋ねて申し訳ありません。確かに私は何度もstackoverflowで検索しましたが、私が探していた答えを得ることができませんでした。私はいくつかの抜粋を見つけましたが、それらを一緒に持ってきませんでした。

私のウェブサイトでは、2つの企業をイメージチャート/グラフで比較したいと思います。各企業（およびいくつかのハンデレットがある）は、 "000000"（6桁）のようなIDを持っています。チャートの画像リンクは "pic_000123_000456.peng"とすることができます。これは会社ID 000123と会社000456を比較します。私はすでにこのエンジンを作りました。問題なく動作します。

ここでは、ユーザーが2つの個別の比較を選択するための簡単なページを提供したいと思います。そのために、2つのドロップダウンリストを表示したいと思います。 Imageシェルの下に表示されます。私は適切な方法で行っている2つのスニペットを見つけました。うまくいけば誰かが解決策を見つけることができれそれは素晴らしいだろう！

1. 次のjQueryコードは、（素晴らしい作品）ドロップダウンリストを変更した後すぐに画像を表示している。

   <script src="http://code.jquery.com/jquery-latest.js"></script> 
   <select id="sel"> 
   <option value="">Please Select the companies the Logo</option> 
   <option value="pic_000123_000456.png">Chart 1</option> 
   <option value="pic_000789_000456.png">Chart 2</option> 
   <option value="pic_000789_000123.png">Chart 3</option> 
   </select> <br> 
   <img id="swapImg" src="pic_000000_000000.png"> 
   <script> 
   $(document).ready(function() { 
   $("#sel").change(function() { 
   var imgUrl = $(this).val(); 
   $("#swapImg").attr("src", imgUrl); 
   }); 
   }); 
   </script> 
   

2. 次jqueryのコードは、2つのdropdownlistsからの二つのテキスト部分を表示しているとそれらをtogther持って来なさい。

   <script src="http://code.jquery.com/jquery-latest.js"></script> 
   <select name="image" id="image"> 
   <option value="pic_000123_">Company 1</option> 
   <option value="pic_000789_">Company 2</option> 
   <option value="pic_000789_">Company 3</option> 
   </select> 
   <select name="image" id="image"> 
   <option value="000456.png">Company 1</option> 
   <option value="000456.png">Company 2</option> 
   <option value="000123.png">Company 3</option> 
   </select> 
   <div id="#imagePreview"></div> 
   <script>  
   $(document).ready(function() { 
   $("#image").change(function() { 
   var str = ""; 
   $("select option:selected").each(function() { str += $(this).text() + ""; }); 
   $("div").html(str); 
   }) 
   .change(); 
   }); 
   </script> 
   

だからではなく、実施例2のテキスト出力（実施例1のように）画像が表示されるべきであるが、実施例の値が2

Answer 1

のリンク部を有する場合、私正しく理解したら、ドロップダウンからの値を結合してイメージ名を作成します。

<script src="http://code.jquery.com/jquery-latest.js"></script> 
<select name="image1" id="image1"> 
    <option value="pic_000123_">Company 1</option> 
    <option value="pic_000789_">Company 2</option> 
    <option value="pic_000789_">Company 3</option> 
</select> 
<select name="image2" id="image2"> 
    <option value="000456.png">Company 1</option> 
    <option value="000456.png">Company 2</option> 
    <option value="000123.png">Company 3</option> 
</select> 
<img id="swapImg" src="pic_000000_000000.png"> 
<script>  
$(document).ready(function() { 
    $("select").change(function() { 
    var str = $("#image1").val() + $("#image2").val(); 
    $("#swapImg").attr("src", str); 
    }); 
}); 
</script> 

Answer 2

<script src="http://code.jquery.com/jquery-latest.js"></script> 
<!-- you can repeat these image groups with float left on your "image-group" class --> 
<div class="image-group"> 
    <select name="image"> 
    <option value="pic_000123_">Company 1</option> 
    <option value="pic_000789_">Company 2</option> 
    <option value="pic_000789_">Company 3</option> 
    </select> 
    <select name="image"> 
    <option value="000456.png">Company 1</option> 
    <option value="000456.png">Company 2</option> 
    <option value="000123.png">Company 3</option> 
    </select> 
    <div class="image-preview"></div> 
</div> 
<!-- just need to call this one time after the image groups --> 
<script> 
    // no need to onload as its declared after dom dependancy 
    $('select[name=image]').change(function() { 
     var src = '', $this = $(this), $group = $this.closest('.image-group'); 
     $group.find('select[name=image').each(function(){ 
      src += $(this).val(); 
     }); 
     $group.find('.image-preview').html('').append($('<img />').attr('src',src)); 
    }).trigger('change'); 
</script> 

<!-- this code was brought to you by the free time I saved after building kitgui.com -->