Question

Using a select dropdown I can replace a main image with the onchange content of value=””

<select name="dropper" id="dropper">
<option value="pl2.jpg" title="pl2.jpg">Design 2</option>
<option value="pl4.jpg" title="pl4.jpg" >Design 4</option>
</select>

<div id="SWAPview"></div>

using

$(document).ready(function() {
$("#dropper").change(function() {
    var src = $(this).val();

    $("#SWAPview").html(src ? "<img src='" + src + "'>" : "");
    });
});

In the live script I can’t use the value=”” so was looking at the title=”” attribute but going around in circles. Any help greatly appreciated.

Answer 1

You can access element property values via prop or attr. As you astutely noticed, the val property no longer works because the select element does not take on the title of the option. Instead you can search its children and filter on the selected using :selected. You will want to get the select option before retrieving this though.

$("#dropper").change(function() {
    var src = $(this).children('option').filter(':selected').prop('title'); //jquery 1.7+
    var src = $(this).children('option').filter(':selected').attr('title'); //jquery < 1.7

    $("#SWAPview img").prop('src', src);
});

I updated my answer based on this feedback from the jQuery documentation.

Because :selected is a jQuery extension and not part of the CSS
specification, queries using :selected cannot take advantage of the
performance boost provided by the native DOM querySelectorAll()
method. To achieve the best performance when using :selected to select
elements, first select the elements using a pure CSS selector, then
use .filter(“:selected”).