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>

单击“弹出更改选择”选项中的图像

1 个答案: