Question

使用选择下拉列表我可以使用值=“”

的onchange内容替换主图像

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

使用

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

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

在实时脚本中，我不能使用value =“”所以查看title =“”属性，但绕圈转。非常感谢任何帮助。

Answer 1

试试这段代码：

<select>
    <option value="1" data-x="image-1.jpg">Iran</option>
    <option value="2" data-x="image-2.jpg">Irak</option>
    <option value="3" data-x="image-3.jpg">Afganistan</option>
</select>

$('select').find('option').click(function()
{
    var image = $(this).attr( 'data-x' );
    $('#content').empty().append('<img style="display:none" src="+ image +" title="Thumb" alt="Thumb"/>');

    //Load and Show
    $('#content').find('img').load(function(){
        $(this).fadeIn(250);
    });

});

阅读本文： http://ejohn.org/blog/html-5-data-attributes/

Answer 2

您可以通过prop或attr访问元素属性值。正如您敏锐地注意到的那样，val属性不再有效，因为select元素不会占用选项的标题。相反，您可以搜索其子项并使用:selected过滤所选项。在检索之前，您需要获取选择选项。

$("#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);
});

我根据jQuery文档中的反馈更新了我的答案。

因为：selected是jQuery扩展而不是CSS的一部分规范，查询使用：选中不能利用本机DOM querySelectorAll（）提供的性能提升方法。使用时达到最佳性能：选择以进行选择元素，首先使用纯CSS选择器选择元素使用.filter（“：selected”）。

通过输入标题更改jQuery图像

2 个答案: