ポップオーバー変更の画像をクリック

Question

選択ボックスのブートストラップでホバー上にショーポップオーバーを表示し、ポップオーバーで私は2つの画像を持っています。ユーザーが画像をクリックすると、その選択ボックスの値が変更されますが、1回だけ機能し、選択したボックスの選択値を変更することはできません。
はここHTMLコードです：

<div class="form-group" data-toggle="popover" data-html="true" data-content="A <img src='css/A.png' data-select='A'><br>B <img src='css/b.png' data-select='B'> <br> click on image to change select" data-trigger="hover" data-placement="auto top"> 
    <select class="form-control" name="select_type" id="quotetype" required> 
     <option value="">Type</option> 
     <option value="A">A</option> 
     <option value= "B">B</option> 
     <option value= "C">C</option> 
    </select> 
</div> 

のjQueryコード：ここで

$("[data-toggle='popover']").popover({ trigger: "manual" , html: true, animation:false}) 
.on("mouseenter", function() { 
    var _this = this; 
    $(this).popover("show"); 
    $(".popover").on("mouseleave", function() { 
     $(_this).popover('hide'); 
    }); 
}).on("mouseleave", function() { 
    var _this = this; 
    setTimeout(function() { 
     if (!$(".popover:hover").length) { 
      $(_this).popover("hide"); 
     } 
    }, 300); 
}).parent().on('click', '[data-select]', function() { 
    console.log('get'); 

    var $selectValue = $(this).attr("data-select"); 

    $("#quotetype").find('option').attr("selected", false); 
    $('#quotetype').find('option[value="'+$selectValue+'"]').attr("selected", "selected"); 
}); 

は、任意のヘルプJSFIDDLEリンク

おかげで

Answer 1

今すぐ確認あなたのコードを更新します。あなたのフィドル選択ボックス存在しないで

$("[data-toggle='popover']").popover({ trigger: "manual" , html: true, animation:false}) 
 
.on("mouseenter", function() { 
 
    var _this = this; 
 
    $(this).popover("show"); 
 
    $(".popover").on("mouseleave", function() { 
 
     $(_this).popover('hide'); 
 
    }); 
 
}).on("mouseleave", function() { 
 
    var _this = this; 
 
    setTimeout(function() { 
 
     if (!$(".popover:hover").length) { 
 
      $(_this).popover("hide"); 
 
     } 
 
    }, 300); 
 
}).parent().on('click', '[data-select]', function() { 
 
    console.log('get'); 
 

 
    var $selectValue = $(this).attr("data-select"); 
 

 
    $("#quotetype").find('option').attr("selected", false); 
 
    
 
    $('#quotetype').val($selectValue).trigger('change'); 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 
<div class="form-group" data-toggle="popover" data-html="true" data-content="A <img src='css/A.png' data-select='A'><br>B <img src='css/b.png' data-select='B'> <br> click on image to change select" data-trigger="hover" data-placement="auto top"> 
 
    <select class="form-control" name="select_type" id="quotetype" required> 
 
     <option value="">Type</option> 
 
     <option value="A">A</option> 
 
     <option value= "B">B</option> 
 
     <option value= "C">C</option> 
 
    </select> 
 
</div>