CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
webdevanuj
webdevanuj

Reputation: 675

Click on image in Popover change Select option

I have show popover on hover in bootstrap on select box and in popover I have two images. When a user clicks on the image, its change select box value but it only works one time then stop to change select box selected value.
Here is 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");
});

Here is JSFIDDLE link

Thanks for any Help

Upvotes: 0

Views: 929

Answers (1)

Ankit
Ankit

Reputation: 1114

Check now i update your 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>

Upvotes: 1

Related Questions