jQuery: два выпадающих списка строят URL-адрес изображения и показывают картинку

Question

Прежде всего, я новичок в jQuery. Извините, что спрашиваю немного глупо (ниже моего плохого английского ^^). Конечно, я много раз искал в stackoverflow, но не смог получить ответ, который искал. Я нашел несколько фрагментов, но не смог собрать их вместе.

На моем сайте я хотел бы сравнить две компании с графическим изображением / графиком. Каждая компания (и есть несколько сотен человек) имеет идентификатор типа «000000» (6 цифр). Ссылка на изображение для диаграммы может быть "pic_000123_000456.peng" - это сравнило бы компанию с идентификатором 000123 с компанией 000456. Я думаю, это понятно? Я уже построил этот двигатель, он работает без проблем

Теперь я хотел бы предложить пользователю простую страницу для выбора двух собственных сравнений. Для этого я хотел бы отобразить два выпадающих списка. Под изображением появится оболочка. Я нашел два фрагмента, которые идут в правильном направлении. Надеюсь, кто-нибудь найдет решение. Это было бы фантастически!

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 отображает две текстовые части из двух выпадающих списков и объединяет их.

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