點擊圖片彈出更改選擇選項

我有顯示彈出窗口懸停在引導選擇框和彈出我有兩個圖像。當用戶點擊圖像時，其更改選擇框值，但它只能工作一次，然後停止以更改選擇框選定值。
這裏是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

點擊圖片彈出更改選擇選項

回答

相關問題