是否单击jQuery轮播更新选择列表中的选定项目？

Question

我正在尝试挂接jQuery图像轮播图像上的单击事件，以便它更新同一文档中的选择列表，并设置"selected“选项以匹配在轮播中单击的项目。每个轮播图像上的"title“属性与选择列表中的至少一个选项匹配(标题总是唯一的)。

例如：

1)传送带图片标题为: image1、image2、image3

<div id="carousel">
<ul>
    <li><img src='folder1/screenshot.jpg' title=image1 /></li>
    <li><img src='folder2/screenshot.jpg' title=image2 /></li>
    <li><img src='folder3/screenshot.jpg' title=image3 /></li>
</ul>
</div>

2)选择列表选项为...

<select id="myThumbs">
    <option>image1</option>
    <option selected="selected">image2</option>
    <option>image3</option>
</select>  

我的现有代码如下，它已经将hover事件绑定到carousel外部的预览div。我希望保留此行为，并添加单击行为以更新选项列表中的选定项，以便它与所单击的轮播图像的标题相匹配。

$(function() {
    $("#carousel").jCarouselLite({
        btnNext: ".next",
        btnPrev: ".prev",
        visible: 6,
        mouseWheel: true,
            speed: 700
    });
$('#carousel').show();

$('#myThumbs').change(function() {
  var myImage = $('#myThumbs :selected').text();
 $('.selectedImage img').attr('src','../wp-content/themes/mytheme/styles/'+myImage+'/screenshot.jpg');
});

    $('#carousel ul li').click(function(e) {
    var myOption = $(this).children('img').attr('title');
    $('#myThumbs').addOption('Text', myOption);
    });

$('#carousel ul li').hover(function(e) {
  var img_src = $(this).children('img').attr('src');
    $('.selectedImage img').attr('src',img_src);  

}
,function() {
$('.selectedImage img').attr('src', '<?php echo $selectedThumb; ?>');});
});

Answer 1

如果你想在一个选择和一个图像之间保持1:1的关系，你需要重置所有的选择选项并只保留你想要的选项。

   $('#carousel ul li').click(function(){
    var myOption = $(this).children('img').attr('title');
    $('#myThumbs').addOption('Text', myOption);
     $('#myThumbs option').each(function(){
       if($(this).text()=myOption){
         $(this).attr('selected','true')
       }else{
         $(this).attr('selected','false')
       }
     }

该代码尚未经过测试，因此您可能需要对其进行调整。