jQuery: zwei Dropdownlisten, die eine Bild-URL aufbauen und das Bild anzeigen

Question

Auf meiner Website möchte ich zwei Unternehmen mit einer Image-Chart/Grafik vergleichen. Jedes Unternehmen (und es gibt einige hundert) hat eine ID wie "000000" (6 Ziffern). Ein Bildlink für eine Grafik könnte "pic_000123_000456.peng" lauten - das würde das Unternehmen mit der ID 000123 mit dem Unternehmen 000456 vergleichen. Ich denke, das ist klar? Ich habe diese Engine bereits gebaut, sie funktioniert ohne Probleme

Jetzt möchte ich eine einfache Seite anbieten, auf der die Benutzer ihre eigenen zwei individuellen Vergleiche auswählen können. Dazu möchte ich zwei Dropdown-Listen anzeigen. Darunter soll die Image Shell erscheinen. Ich habe zwei Snippets gefunden, die in die richtige Richtung gehen. Hoffentlich kann jemand eine Lösung finden. Das wäre fantastisch!

1. Der folgende Jquery-Code zeigt ein Bild sofort nach dem Ändern der Dropdown-Liste an (das funktioniert prima):

   <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. Der nächste Jquery-Code zeigt zwei Text-Teile aus zwei Dropdown-Listen an und bringt sie zusammen.

   <script src="http://code.jquery.com/jquery-latest.js"></script> <select name="image" id="image"> <option value="pic000123">Company 1</option> <option value="pic000789">Company 2</option> <option value="pic000789">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>

So soll anstelle der Textausgabe in Beispiel 2 das Bild (wie in Beispiel 1) erscheinen, aber mit den Link-Teilen der Werte aus Beispiel 2.

Answer 1

Wenn ich Sie richtig verstehe, möchten Sie die Werte aus den Dropdown-Listen kombinieren, um den Bildnamen zu erstellen.

<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 -->