jQuery: two dropdownlists building an image-url and show the picture

Question

On my website I would like to compare two companies with an image-chart/-graph. Each company (and there are a few hundreds) has an ID like "000000" (6 digits). An image link for a chart could be "pic_000123_000456.peng" - that would compare the company with the id 000123 with the company 000456. I guess, that's clear? I've already built this engine, it works without problems

Now I'd like to offer an easy page for user to choose for their own two individual Comparisons. For that I'd like to display two dropdownlists. Below the Image shell appear. I've found two snippets, which are going the right way. Hopefully someone could find a solution. That would be fantastic!

The following jquery-code is displaying an image immediately after changing the dropdownlist (that works great):

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

The next jquery-code is displaying two text-parts from two dropdownlists and bring them 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>

So instead of the text-output in example 2 the image (like in example 1) should appear, but with the link-parts of the values of example 2.

Duplicate `id`s are invalid within the same document. An `id` ***must*** be unique (both selects seem to share the same `name` too, but that's valid, if rather a poor idea if the data's ever submitted to the server since the second element would override the first of that `name`). — David Thomas, Dec 08 '11 at 22:42

score 1 · Accepted Answer · answered Dec 08 '11 at 22:46

1

If I understand you correctly, you want to combine the values from the dropdowns to create the image name.

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

answered Dec 08 '11 at 22:46

jwatts1980

7,254
2
28
44

1

Awesome! That's exactly what I was searching for. Thank you very much, you're the heroe of my day :-) – Rockbear Dec 09 '11 at 11:23
Is there a way to display a wait-graphic until the real immage will be shown? Some of my request are quite complex and some of them will take around 2-4 secs. So the visitor don't know if something changes or not... – Rockbear Jan 16 '12 at 16:56
There is a `complete` flag on image elements that is set==true when it's fully loaded, although I've heard it can be tricky. But check out the answer on this thread: http://stackoverflow.com/questions/2392410/jquery-loading-images-with-complete-callback You will have to adapt it to your needs, but I think it provides the framework for your answer. – jwatts1980 Jan 17 '12 at 18:00

score 0 · Answer 2 · answered Dec 08 '11 at 22:57

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

jQuery: two dropdownlists building an image-url and show the picture

2 Answers2