单击“ Popover更改选择”中的图像

Question

我在选择框的引导程序中的悬停上显示了弹出窗口，在弹出窗口中有两个图像。 当用户单击图像时，它的更改选择框值将起作用，但是只能运行一次，然后停止更改选择框选择值。
这是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>