Question

请原谅我，我自学成才，缺少大量的知识＆gt;＆lt;

我找到了一些代码（可能来自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());
    });
});

这是我想要的方式，但是它会将选项的文本设为＆＃34;＆＃34;进入标题范围。我想要显示选项data-tname=""文字。我试图用第二段中的数据（＆＃39; tname＆＃39;）替换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'));
});

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

1 个答案: