Klicken Sie auf das Bild in Popover ändern Wählen Sie Option

Question

Ich habe Show-Popover auf Hover in Bootstrap auf Auswahlfeld und in Popover Ich habe zwei Bilder. Wenn ein Benutzer auf das Bild klickt, ändert sich der Wert des Auswahlfelds, aber es funktioniert nur einmal, und dann wird der ausgewählte Wert des Auswahlfelds gestoppt.
Hier ist html Code:

<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 Code:

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

Hier ist JSFIDDLE Link

Vielen Dank für jede Hilfe

Answer 1

Überprüfen Sie jetzt, ich aktualisiere Ihren Code.

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