Bootstrap 选择下拉菜单显示控件上方的选定选项答案

【问题标题】：Bootstrap select dropdown showing selected option above the controlBootstrap 选择下拉菜单显示控件上方的选定选项
【发布时间】：2017-04-05 08:59:47
【问题描述】：

不确定为什么所选选项显示在自定义下拉列表上方。这是html：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
<meta http-equiv="content-type" content="application/xhtml+xml; text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="cleartype" content="on">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="viewport" content="user-scalable=no">

<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="bootstrap/css/jasny-bootstrap.min.css" />   
<link rel="stylesheet/less" type="text/css" href="style.less" />
<script type="text/javascript" src="bootstrap/js/less.js"></script>
</head>

<body>
<div class="row">
    <div class="col-xs-9">
        <select>
            <!-- <option selected disabled>Select Name:</option> -->
            <option>Vogel</option>
            <option>Other Name</option>
        </select>
    </div>
    <div class="col-xs-3">
         <button id="btn_id" class="button-info">Button</button>
    </div>
</div>
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript" src="jquery/jquery.tinycolorpicker.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrap/js/jasny-bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrap/js/offcanvas.js"></script>
<script type="text/javascript" src="jquery/jquery.mobile.custom.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>

也尝试定义一个选定的选项（显示已注释掉）。我在 CSS 中放了什么并不重要，至少我尝试过的所有东西都是如此，但这是当前与任何 Bootstrap 3.3.7 模块一起运行的选择。

select {
width:100%;
height:24px;
background-color:white;
border:2px solid black;
}

实际上还没有看到与这个确切问题相关的任何其他问题，所以我一直在尝试破解它。跨浏览器显示相同的“错误”。我现在正在使用自定义字体，但我尝试将字体系列更改放入上面的 CSS 中，但没有运气。

关于如何让下拉菜单上方的选项消失的任何想法？

更新：
这是 Firefox 上的检查列：

<div class="col-xs-9">
  <div class="ui-select">
    <div id="select-27-button" class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-corner-all ui-shadow">
        <span>Vogel</span>
        <select size="1">
            <option>Vogel</option>
            <option>Other name</option>
        </select>
    </div>
  </div>
</div>

我还在文档末尾添加了 js 脚本，包括我的自定义 main.js 文件，它不处理任何相关内容。

【问题讨论】：

您是否尝试将引导程序的下拉类放在select 上？
我在你的代码中看不到问题
可能是导入，或者是一些额外的 javascript... 您在选择时检查过您的代码吗？是否出现新的<p> 或<label>？
@anfuca 我更新了 html 代码以包含导入的内容..我确实检查过一段时间，但我需要再次检查..brb！
@whyoz 除了显示的内容之外，您还在使用其他脚本吗？比如select2或者selectize?

标签： jquery html css jquery-mobile twitter-bootstrap-3

【解决方案1】：

select {
width:100%;
height:24px;
background-color:white;
border:2px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.7.1/less.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/css/jasny-bootstrap.min.css">
 
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

 
<body>
<div class="row">
    <div class="col-xs-9">
        <select>
            <!-- <option selected disabled>Select Name:</option> -->
            <option>Vogel</option>
            <option>Other Name</option>
        </select>
    </div>
    <div class="col-xs-3">
         <button id="btn_id" class="button-info">Button</button>
    </div>
</div>
</body>

此代码完全没有问题我们需要查看您页面上的其余代码以了解您的问题

更新：我无法在线访问的唯一文件

<link rel="stylesheet/less" type="text/css" href="style.less" />

没有它的代码效果很好，我认为有些错误或风格会影响你的选择

【讨论】：

你能检查一下元素，看看你有什么类型的额外元素吗？
在 Firefox 中使用经过检查的 html 更新了帖子
检查 style.less，因为我在这里更新代码，直到现在我们没有问题，大多数情况下你在 style.less 中影响了选择那里的选择搜索
帖子中的css来自style.less，本质上只是一个普通的css

【解决方案2】：

其中一个 javascript 正在添加 <span>...
尝试猜测谁是或做这个肮脏的把戏：用 css 隐藏它

.ui-select span { 
  display: none; 
}

【讨论】：

是的，我看到了，好眼力。这类似于我一直在处理的修复...我在 style.less 中有一堆引导程序覆盖，所以当我将它添加到文件的最后时，它就成功了！感谢您快速轻松地破解！我敢肯定这种风格以后不会有任何影响（duh,duh,dunt!!）
我确实确认是 jquery.mobile.custom.js 文件导致跨度显示在选择上方。由于该文件的好处多于坏处，因此这似乎仍然是目前最好的解决方案。