bootstrap中的默认选择

pw9qyyiw  于 2023-10-14  发布在  Bootstrap
关注(0)|答案(5)|浏览(230)

我使用的是bootstrap,需要将第一个选项设为默认。以下内容不起作用。

<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    CHOOSE FEATURE
    <span class="caret"></span>
</button>

<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li selected="selected"><a>Feature 1</a></li>
    <li><a>Feature 2</a></li>
    <li><a>Feature 3</a></li>
    <li><a>Feature 4</a></li>
    <li><a>Feature 5</a></li>
    <li><a>Feature 6</a></li>
</ul>
nwlqm0z1

nwlqm0z11#

不幸的是,我不相信你能达到这种效果使用传统的引导下拉菜单。
与传统的HTML“选择”不同,引导下拉列表通常用于将一系列链接分组到标题下。当你点击一个菜单项时,它不会被选中,而是通常会执行一个操作。
我建议只使用一个简单的HTML选择,但从引导CSS库借用样式,使它看起来一致。沿着下列路线的东西:

<select class="bootstrap-select">
  <option value="1" selected="selected">Feature 1</option>
  <option value="2">Feature 2</option>
  <option value="3">Feature 3</option>
  <option value="4">Feature 4</option>
</select>
2admgd59

2admgd592#

试试这个:

$(document).ready(function() {  
   $(".dropdown .dropdown-menu li a")[0].click();
});

这将始终选择第一个li

gwo2fgha

gwo2fgha3#

属性“selected”只在<select>元素中起作用。不幸的是,它不适用于列表。
我相信你想要的是:

<select class="form-control" name="features">
    <option value="" selected>Feature 1</option>
    <option value="">Feature 2</option>
    <option value="">Feature 3</option>
    <option value="">Feature 4</option>
    <option value="">Feature 5</option>
    <option value="">Feature 6</option>
</select>
sh7euo9m

sh7euo9m4#

我用Flask + Python + Jinja堆栈完成了这一点,如果你有一个不同的后端,同样的逻辑仍然适用。使用if语句检查该值是否是您想要的值,如果是,则将其设置为选中。在我的例子中,我将主题设置为下面的ZTM-Linux。

<select class="form-control" id="Topic" name="Topic">
            <option disabled>Choose a Topic</option>
            {% for each in query %}
            <option value="{{ each.topic }}" {% if each.topic == "ZTM-Linux" %}selected{% endif %}>{{ each.topic }}</option>
            {% endfor %}
        </select>
        {% endif %}
iovurdzv

iovurdzv5#

<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  </button>
  <div class="dropdown-menu">
    <?php //your loop start here{ ?>
        <a id="some_id" class="dropdown-item" href="#"> <?php echo $yourvalue ?> </a>
    <?php //your loop end here  } ?>
  </div>
</div>

  .....

</html>

<script>                                                         
    $(document).ready(function() {  
    $("#some_id")[0].click();
     });
 </script>

相关问题