0

我可以在第一个列表中成功显示弹出框，但在第二个列表中显示它时遇到问题。

       <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>
4

2 回答 2

0

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

您在任何地方都没有 testlist2 id，因此您的 javascript 调用$("#testList2")将永远不会发生。

于 2013-07-30T16:11:23.480 回答
0

更改您的选择，以便 testlist 是一个类而不是一个 id。然后将脚本更改为 $('.testlist') 而不是 $('#testlist')

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

于 2013-07-30T17:18:20.233 回答