不能在 <select> 标记中使用 twitter-bootstrap 弹出框答案

【问题标题】：Can't use twitter-bootstrap popover in a <select> tag不能在 <select> 标记中使用 twitter-bootstrap 弹出框
【发布时间】：2012-07-19 10:11:30
【问题描述】：

我在<select> html 标记中显示一个列表，我想用一个弹出框显示每个项目的一些详细信息。我加载了所有的 js 文件，并为每个 <option> 进行了初始化，但它不会显示任何信息。

 <select id="type_traitement" class="span10"> 
                <?php
                foreach ($type_traitement_simple as $tts) {
                    echo '<option value="' . $tts->id_type_traitement_simple . '">
                        <a href="#" 
                        rel="popover" data-content="' . $tts->description . '"
                        data-original-title="' . $tts->name . '"id="t_'.$tts->id_type_traitement_simple.'">                         
                        ' . $tts->name . '
                            </a>
                            </option>';

                    ?>
                    <script>  
                        $(function ()  
                        { $("#t_<?php echo $tts->id_type_traitement_simple ?>").popover();  
                        });  
                    </script>
                    <?php


                }
                ?>
            </select>

【问题讨论】：

控制台有没有js错误
我没有看到任何错误。

标签： php javascript html twitter-bootstrap popover

【解决方案1】：

更新您的 foreach 循环，如下所示。

<?php foreach($type_traitement_simple as $tts): ?>
<option value="<?php echo $tts->id_type_traitement_simple; ?>"
    data-content="<?php echo $tts->description; ?>"
    data-title="<?php echo $tts->name; ?>"><?php echo $tts->name; ?></option>
<?php endforeach; ?>

这应该是循环排序的。现在将下面的 JavaScript 放在 jQuery、Bootstrap Tooltip 和 Bootstrap Popover 脚本之后。

<script type="text/javascript">
$(function() {
    $('#type_traitement option').popover({
        placement: 'right',
        trigger: 'manual'
    }).hover(function() {
        $(this).popover('toggle');
    });
});
</script>

【讨论】：