jquery - Bootstrap 选择下拉列表显示控件上方的选定选项

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

enter image description here

不确定为什么所选选项显示在自定义下拉列表上方。这是 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 mod 一起运行的内容。

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 文件。

最佳答案

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

.ui-select span { 
  display: none; 
}

关于jquery - Bootstrap 选择下拉列表显示控件上方的选定选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40729094/

相关文章:

javascript - 如何使元素在父 <div> 边框下消失

javascript - 如何将图像添加到也填充隐藏数据输入的 JQuery 自动完成中?

html - CSS HTML 问题 - 工具栏延伸太远

css - 为什么 Font Squirrel 的 @font-face 定义包含两个 src 声明?

javascript - 如果我将其放入 js 文件夹中,功能将无法正常工作

javascript - 匹配jquery数据属性后获取子元素

html - 如何从添加到我的元素的字体中使用@font-face?

javascript - Object.style.filter ="Flipv"它在 Internet Explorer 中工作正常。在 Firefox 中我该怎么做?

javascript - 如何根据下拉列表的变化使用 d3.js 对数据集进行子集化

javascript - 使用对象数组作为源的 JQuery 自动完成的返回值