Question

我可以在第一个列表上成功显示popover，但是我在第二个列表中显示问题。

       <html><head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Bootstrap Skeleton - jsFiddle demo by herlambangpermadi</title> 
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>

  <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
  <style type="text/css">
    @import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
.container {
    margin: 40px;
}
  </style>
</head>
<body>
<select class="btn typeahead dropdown-toggle" autofocus width="10"  size="4" id="testList2">
<option value="1" data-title="This is item 1." data-content="Lots of stuff to say 1" style="color:red;">Item 1</option>
<option value="2" data-title="This is item 2." data-content="Lots of stuff to say 2" style="color:green;">Item 2</option>
</select>
  <?php
require_once 'settings.php';
$db = mysql_connect($dbHost,$dbUser,$dbPass);
mysql_select_db($dbname,$db);
$sql = mysql_query("SELECT * FROM adminklasifier");
while($row = mysql_fetch_array($sql)) {
    $clsfr = $row['klasifier'];
    $sql = mysql_query("SELECT * FROM adminklasifier");
        echo '<select id="testList" name="cmake" class="" autofocus width="10">';
        echo '<option value="0" data-title="This is item 1." data-content="Lots of stuff to say 1">-Pilih Domain Klasifikasi-</option>';
        while($row = mysql_fetch_array($sql)) {
            echo '<option ' . ($clsfr==$row['klasifier']) . ' value="'.$row['klasifier'].'"'.(($_POST['cmake'] == $row['klasifier']) ? 'selected=selected' : NULL).'>'.$row['klasifier'].'</option>';
    }
    echo '</select>';
}
?>
</body></html>
<script type="text/javascript">//<![CDATA[ 
$(document).ready(function() {

$("#testList").on('mouseleave', function(e) {
    $('#testList').popover('destroy');
});
$("#testList").on('mouseover', function(e) {
    var $e = $(e.target); 
    if ($e.is('option')) {
        $('#testList').popover('destroy');
        $("#testList").popover({
            trigger: 'manual',
            placement: 'right',
            title: $e.attr("data-title"),
            content: $e.attr("data-content")
        }).popover('show');
    }
});
$("#testList2").on('mouseleave', function(e) {
    $('#testList2').popover('destroy');
});
$("#testList2").on('mouseover', function(e) {
    var $e = $(e.target); 
    if ($e.is('option')) {
        $('#testList2').popover('destroy');
        $("#testList2").popover({
            trigger: 'manual',
            placement: 'right',
            title: $e.attr("data-title"),
            content: $e.attr("data-content")
        }).popover('show');
    }
});
});
</script>

Answer 1

您的选择ID是：testlist <select size="4" id="testList">

您没有任何testlist2 ID，因此$("#testList2")上的javascript调用永远不会发生。

Answer 2

更改您的选择，以便testlist是一个类而不是id。然后将脚本更改为$（'。testlist'）而不是$（'＃testlist'）

然后该事件将触发两个选择项目。

在多个列表中显示popover

2 个答案: