2013-07-30 55 views
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> 

回答

0

你選擇ID是:testlist <select size="4" id="testList">

你沒有任何地方testlist2 ID,所以你對$("#testList2") javascript調用永遠不會發生。

+0

我有del選擇與id = testlist,n給id =「testList到第二個列表。怎麼樣? – user2597016

0

更改您的選擇,以便testlist是一個類而不是一個id。然後將腳本改爲$('。testlist')而不是$('#testlist')

然後事件將觸發這兩個選擇項。