简单的jQuery/JavaScript的下拉菜单

Question

请原谅我，我是自学成才的知识缺失的大口袋> <

我发现了一些代码（可能是从你们这里在Stockoverflow！）并设法让它在我的网站上运行。我需要对我的jquery进行一次更改，但当我这样做时它不起作用。

这是不变的version （下拉列表就是我的工作）

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

这工作我怎么想它，但它将选项的值的文本=“”放入标题范围。我想要显示选项data-tname=""文字。我试图用第二段中的数据（'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')); 
});