简单的jquery / javascript下拉菜单，具有2个输出（1个img，1个标题）

Question

请原谅我我自学成才，缺少很多知识> <

我找到了一些代码（可能是从Stockoverflow的你们这里来的！），并设法使其在我的网站上工作。 我只需要对jquery进行1次更改，但是当我这样做时它不起作用。

这是未更改的版本 （下拉列表是我正在处理的内容）

的HTML

<div class="prints">
    <div><img class="printShop" src="art_images/anime_art_prints/p000a.png" name="image-swap"></div>
    <div><span class="titleName" name="title-swap">Title of Artwork</span></div>
    <div>
        <select name="printchoice" id="printchoice">
            <option data-tname="Select" value="art_images/anime_art_prints/p000a.png">Please Select your Print</option>
            <option data-tname="Selected One" value="art_images/anime_art_prints/p000b.png">A Sassy Catgirl</option>
            <option data-tname="Selected Two" value="art_images/anime_art_prints/p000c.png">Mermaid Friends</option>
            <option data-tname="Selected Three" value="art_images/anime_art_prints/p000d.png">Galaxy Girl</option>
        </select>            
    </div>
</div>

JS

$(document).ready(function(){

    $("#printchoice").change(function(){
        $("img[name=image-swap]").attr("src",$(this).val());
    });

    $("#printchoice").change(function(){
        $("span[name=title-swap]").html($(this).val());
    });
});

这可以按我想要的方式工作，但是会将选项的value =“”文本放入标题范围。 我想显示data-tname=""文本选项。 我试图在第二段中用data（'tname'）替换val（）无济于事。 那似乎打破了它:(

如果您花费的时间不多，您是否可以快速浏览一下，是否需要更改使其超级简单以使它按我的需要工作？

Answer 1

$("#printchoice").change(function(){
    $("img[name=image-swap]").attr("src",$(this).val());

    $("span[name=title-swap]").html($(this).find('option:selected').attr('data-tname'));
});