那些遇到过的问题

标签: bootstrap-select

bootstrap - 选择没有选中

我正在使用bootstrap选择.

<select name="categories[]" id="cat" class="selectpicker" multiple>
</select>
Run Code Online (Sandbox Code Playgroud)

从这里获取选项标签,

var result='';
for(var i=0;  i<res.getcategories.length;  i++) 
{                    
  result += '<option value='+res.getcategories[i].cat_id+'>'+res.getcategories[i].category+'</option>';                 
   $('#cat').html(result); 

}
Run Code Online (Sandbox Code Playgroud)

但是它总是显示没有选择,我不显示其他选项.如果我不使用bootstap类'selectpicker'一切都很好.

jquery twitter-bootstrap bootstrap-select

San*_*yal
2016 08-06
4
推荐指数
1
解决办法
9592
查看次数

如何隐藏bootstrap-select？

我需要隐藏部分Web应用程序的select语句.在代码中的某一点我说$("#select1").addClass("hidden"); 隐藏它.直到我决定使用bootstrap-select它才能正常工作.但是因为我添加了class ="selectpicker",所以当被告​​知时它不再隐藏.我可以看到使用Web检查器将"隐藏"添加到类语句中,但实际上并未隐藏选择.我该如何工作？

css bootstrap-select

Kei*_*ser
lucky-day
4
推荐指数
2
解决办法
5103
查看次数

TemplateSyntaxError：函数调用表达式的语法无效

我尝试将flask-wtf与下面的bootstrap-select结合起来，但我修改了TemplateSyntaxError：函数调用表达式的语法无效

<form class="form-inline" action="/" method="POST" role="form">
<div class="input-group"> 
  {{ form.hidden_tag() }}
  <span class="input-group-addon">Make:</span>
  {{ form.make(id="make_select", class="selectpicker form-control", data-live-search="true") }}
  <span class="input-group-addon">Model:</span>
  {{ form.model(id="model_select", class="selectpicker form-control", data-live-search="true") }}

  <span class="input-group-btn">
    <button class="btn btn-default" type="submit">Search!</button>
  </span>
</div>
</form>
Run Code Online (Sandbox Code Playgroud)

。

TemplateSyntaxError: invalid syntax for function call expression
Traceback (most recent call last):
  File "/home/mic/.virtualenvs/unisnp/lib/python2.7/site-packages/flask/app.py", line 1836, in __call__
return self.wsgi_app(environ, start_response)
  File "/home/mic/.virtualenvs/unisnp/lib/python2.7/site-packages/flask/app.py", line 1820, in wsgi_app
response = self.make_response(self.handle_exception(e))
  File "/home/mic/.virtualenvs/unisnp/lib/python2.7/site-packages/flask/app.py", line 1403, in handle_exception
reraise(exc_type, exc_value, …
Run Code Online (Sandbox Code Playgroud)

flask wtforms flask-wtforms twitter-bootstrap-3 bootstrap-select

use*_*828
lucky-day
3
推荐指数
1
解决办法
2111
查看次数

bootstrap-select 与其他下拉菜单重叠

查看引导选择示例，不同的下拉菜单之间没有发生重叠。但是，在我的示例中，所有下拉菜单都重叠（演示）。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">

    <title>TEST</title>


    <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" >
    <link rel="stylesheet" type="text/css"href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/css/bootstrap-select.min.css">
    <link rel="stylesheet" href="/static/web.css">
    <link href="http://getbootstrap.com/examples/non-responsive/non-responsive.css" rel="stylesheet">

  </head>


  <body>

    <!-- Fixed navbar -->
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">

        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/search/">TEST</a>
        </div>
        <div class="navbar-collapse collapse" id="navbar-collapsible">
          <ul class="nav …
Run Code Online (Sandbox Code Playgroud)

twitter-bootstrap twitter-bootstrap-3 bootstrap-select

use*_*828
lucky-day
3
推荐指数
1
解决办法
6931
查看次数

如何在bootstrap selectpicker中获取单击选项？ 

$('.excludeDaysPicker').selectpicker();
Run Code Online (Sandbox Code Playgroud)

我有bootstrap selectpicker,启用了'multiple'选择选项.

<select class="excludeDaysPicker" multiple title="Not Selected">
<option value="Monday" id="1" class="excludeDays">Monday</option>
<option value="Tuesday" id="2" class="excludeDays">Tuesday</option>
<option value="Wednesday" id="3" class="excludeDays">Wednesday</option>
<option value="Thursday" id="4" class="excludeDays">Thursday</option>
<option value="Friday" id="5" class="excludeDays">Friday</option>
<option value="Saturday" id="6" class="excludeDays">Saturday</option>
<option value="Sunday" id="7" class="excludeDays">Sunday</option>
</select>
Run Code Online (Sandbox Code Playgroud)

单击选择选项(选择或取消选择)后,我想知道单击了哪个选项.

我试过了. 

$('.excludeDaysPicker').on('change',function(){
console.log("id::",$(this).children(':selected').attr('id'));
});
Run Code Online (Sandbox Code Playgroud)

这实际上让我觉得自己.但是因为它是一个多选的启用选择器.如果已经选择了一个选项.返回该选项的id.例如,在下面的屏幕截图中

在此输入图像描述

如果我点击星期三,它给我id 2(因为星期二被选中),但实际上星期三的id是3.我想要我点击的选项元素的id.

而且我无法通过为选项元素提供类来获取选项元素,因为引导选择器选项卡插件会为所有选项元素创建一个列表,如下所示.

在此输入图像描述

所以,

 $('.excludeDays').click(function()
 {
  console.log("excluded day optionselected::",$(this).attr('id'));  
 });
Run Code Online (Sandbox Code Playgroud)

也没有帮助.

男人们有办法吗？

jquery multiple-select bootstrap-select

Kar*_*mar
2015 11-07
3
推荐指数
1
解决办法
3400
查看次数

Bootstrap Select - 按文本设置所选值

如果我只知道文本而不是值,我怎么能改变下拉？

这是我的选择 - 

 <select id="app_id" class="selectpicker">
       <option value="">--Select--</option>
       <option value="1">Application 1</option>
       <option value="2">Application 2</option>
 </select>
Run Code Online (Sandbox Code Playgroud)

twitter-bootstrap-3 bootstrap-select

jag*_*mot
2016 02-08
3
推荐指数
1
解决办法
2万
查看次数

如何在bootstrap-select中更改背景颜色选项？

我正在使用bootstrap-select(来自Silvio Moreto).我想更改列表项的背景颜色和字体颜色.默认为:

在此输入图像描述

我想要像:

在此输入图像描述

我尝试了这个,但没有改变:

.bootstrap-select.btn-group .dropdown-menu li:hover{
      background-color: rgb(191, 82, 121);
      color: white;
}
Run Code Online (Sandbox Code Playgroud)

任何的想法 ？

css bootstrap-select

Coo*_*kie
lucky-day
3
推荐指数
1
解决办法
2万
查看次数

Bootstrap 选择输入区域大于父级

因此，当我在小屏幕（移动设备）上时，我的引导选择区域比我想要的要大。所以我想知道是否有某种方法可以强制选择区域不大于父级。

我的问题通过下图以及片段中重新创建的问题。黑条代表屏幕边缘。

在此输入图像描述 

$.ajax({
  url: "https://restcountries.eu/rest/v2/all",
  success: (data) =>
  {
    let select = $("#select-country");
    for (let country of data)
    {
      select.append(`
          <option>
            ${country.name}
          </option>
        `);
    }
    $(select).prop('disabled', false);
    $(select).selectpicker('refresh');
  }
});
Run Code Online (Sandbox Code Playgroud) 
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css" rel="stylesheet"/>

<div style="width: 300px;">
    <select id='select-country' disabled="true" className="selectpicker" data-live-search="true" title="Choose a country">
    </select>
</div>
<div style="width: 50px; position: absolute; top: 0; left: 300px; height: 200px; background-color: black; z-index: 200">
</div>
Run Code Online (Sandbox Code Playgroud)

html javascript css twitter-bootstrap bootstrap-select

A. *_*Lau
lucky-day
3
推荐指数
1
解决办法
2404
查看次数

TS2339：类型“JQuery&lt;HTMLElement&gt;”上不存在属性“selectpicker”

我正在使用引导选择

我已bootstrap-select使用以下方法成功导入到我的项目中：

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>

<!-- (Optional) Latest compiled and minified JavaScript translation files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/i18n/defaults-*.min.js"></script>
Run Code Online (Sandbox Code Playgroud)

在文档<head>标签内。我想看看如何修改多个选择框中的复选标记，并认为我会尝试使用

$('.selectpicker').selectpicker('deselectAll');
Run Code Online (Sandbox Code Playgroud)

方法如图所示这里。每当我尝试使用那段代码时，都会收到一个错误：

TS2339: Property 'selectpicker' does not exist on type 'JQuery<HTMLElement>'.
Run Code Online (Sandbox Code Playgroud)

我什至尝试使用安装类型定义

npm install --save-dev @types/bootstrap-select
Run Code Online (Sandbox Code Playgroud)

但问题仍然存在。我正在使用 Visual Studio SPA 模板，该模板使用 ASP.NET Core 模板、Vue.js 和 Webpack。

jquery typescript bootstrap-select webpack bootstrap-4

Mik*_*ker
2018 01-18
3
推荐指数
1
解决办法
2971
查看次数

如何使用 bootstrap-select 为“选择”多个框制作占位符？

如何使用 bootstrap-select 在具有多个选项的选择输入上添加占位符？选择第一个选项的通常方法不起作用，因为会添加其他选定的选项。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/css/bootstrap-select.min.css">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/js/bootstrap-select.min.js"></script>

<select class="selectpicker" multiple>
  <option value="" disabled selected hidden>Type</option>
  <option value="">Type 1</option>
  <option value="">Type 2</option>
  <option value="">Type 3</option>
  <option value="">Type 4</option>
</select>
Run Code Online (Sandbox Code Playgroud)

有一个类似的问题，但该解决方案不适用于多选框。

如何为“选择”框制作占位符？

html bootstrap-select

Tri*_*ger
2019 01-29
3
推荐指数
1
解决办法
4255
查看次数

标签 统计

bootstrap-select ×10

css ×3

jquery ×3

twitter-bootstrap ×3

twitter-bootstrap-3 ×3

html ×2

bootstrap-4 ×1

flask ×1

flask-wtforms ×1

javascript ×1

multiple-select ×1

typescript ×1

webpack ×1

wtforms ×1