点击图片弹出更改选择选项

我有显示弹出窗口悬停在引导选择框和弹出我有两个图像。当用户点击图像时，其更改选择框值，但它只能工作一次，然后停止以更改选择框选定值。
这里是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链接

感谢任何帮助

来源

2016-07-26 Anuj Khandelwal

在拨弄选择框不存在。 – ankit

@ankit更新！ –

检查代码。 – ankit

现在检查我更新您的代码。

$("[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>

来源

2016-07-27 17:18:33 ankit

点击图片弹出更改选择选项

回答

相关问题