CODEWITHSUNDEEP
jqueryimageselectdrop-down-menu
Rockbear
Rockbear

Reputation: 25

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

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!

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

Upvotes: 2

Views: 571

Answers (2)

King Friday
King Friday

Reputation: 26096

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

Upvotes: 0

jwatts1980
jwatts1980

Reputation: 7356

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>

Upvotes: 1

Related Questions