Search code examples
jqueryimageselectdrop-down-menu

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.

Solution

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