Javascript 当我将selectpicker类添加到select标记时,bootstrap select(引导选择)下拉列表将消失
当我将Javascript 当我将selectpicker类添加到select标记时,bootstrap select(引导选择)下拉列表将消失,javascript,html,twitter-bootstrap,bootstrap-select,Javascript,Html,Twitter Bootstrap,Bootstrap Select,当我将selectpicker类添加到我的select标记并在浏览器中运行我的页面时,它不会显示任何框… 详细信息,当我删除selectpicker类时,它会正常运行。无论如何,可以在源代码中看到选择框 <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-sele
selectpicker
类添加到我的select标记并在浏览器中运行我的页面时,它不会显示任何
框…详细信息,当我删除
selectpicker
类时,它会正常运行。无论如何,可以在源代码中看到选择框
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.3/css/bootstrap-select.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.3/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.3/js/i18n/defaults-*.min.js"></script>
<!-- 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">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<select class="selectpicker" data-live-search="true" name="cidade">
<option value="test1">Test 1</option>
<option value="test2">Test 2</option>
<option value="test3">Test 3</option>
</select>
</body>
测试1
测试2
测试3
如果使用bootstrap 3.3.7,则必须在启动插件之前包含JQuery。
像这样
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
<!-- other javascript inludes follows -->
如果使用bootstrap 3.3.7,则必须在启动插件之前包含JQuery。 像这样
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
<!-- other javascript inludes follows -->
以下是我的解决方案,用于在class=selectpicker时取消select。我的问题发生在我动态添加引导选择时。经过一天的搜索,我找到了解决办法。我没有在网上看到这个解决方案 .selectpicker命令必须在附加选择项后使用。。下面是我的代码 我希望这个解决方案对每个人都有效
var selectLocaleList = document.createElement("select");
selectLocaleList.setAttribute("id", "myLocaleSelect");
selectLocaleList.setAttribute("class", "form-control");
selectLocaleList.setAttribute("data-style", "btn-danger");
//Create and append the options
$(selectLocaleList).append('<option value="tr">Turkish</option>');
$(selectLocaleList).append('<option value="en">English</option>');
//This is the append code below that adds the select to the page. And this code must be ovet the .selectpicker
modalBody.appendChild(selectLocaleList);
//And this is the .selectpicker after the append..
$(selectLocaleList).selectpicker('val', settings.locale)
.on('change', function () {
// Some functions
});
var selectLocaleList=document.createElement(“选择”);
选择localelist.setAttribute(“id”、“myLocaleSelect”);
选择localelist.setAttribute(“类”、“窗体控件”);
选择localelist.setAttribute(“数据样式”、“btn危险”);
//创建并附加选项
$(selectLocaleList.append('Turkish');
$(selectLocaleList).append('English');
//下面是将select添加到页面的追加代码。并且此代码必须在.selectpicker上
appendChild(选择localelist);
//这是追加后的.selectpicker。。
$(selectLocaleList).selectpicker('val',settings.locale)
.on('change',function(){
//一些功能
});
以下是我的解决方案,用于在class=selectpicker时取消select。我的问题发生在我动态添加引导选择时。经过一天的搜索,我找到了解决办法。我没有在网上看到这个解决方案
.selectpicker命令必须在附加选择项后使用。。下面是我的代码
我希望这个解决方案对每个人都有效
var selectLocaleList = document.createElement("select");
selectLocaleList.setAttribute("id", "myLocaleSelect");
selectLocaleList.setAttribute("class", "form-control");
selectLocaleList.setAttribute("data-style", "btn-danger");
//Create and append the options
$(selectLocaleList).append('<option value="tr">Turkish</option>');
$(selectLocaleList).append('<option value="en">English</option>');
//This is the append code below that adds the select to the page. And this code must be ovet the .selectpicker
modalBody.appendChild(selectLocaleList);
//And this is the .selectpicker after the append..
$(selectLocaleList).selectpicker('val', settings.locale)
.on('change', function () {
// Some functions
});
var selectLocaleList=document.createElement(“选择”);
选择localelist.setAttribute(“id”、“myLocaleSelect”);
选择localelist.setAttribute(“类”、“窗体控件”);
选择localelist.setAttribute(“数据样式”、“btn危险”);
//创建并附加选项
$(selectLocaleList.append('Turkish');
$(selectLocaleList).append('English');
//下面是将select添加到页面的追加代码。并且此代码必须在.selectpicker上
appendChild(选择localelist);
//这是追加后的.selectpicker。。
$(selectLocaleList).selectpicker('val',settings.locale)
.on('change',function(){
//一些功能
});
您需要在引导和引导选择之前包含jQuery。此外,您需要在所有引导文件之后包含所有引导选择文件(在您的代码中,在引导CSS之前包含引导选择CSS)。您需要在引导和引导选择之前包含jQuery。此外,您需要在所有引导文件之后包含所有引导选择文件(在您的代码中,在引导CSS之前包含引导选择CSS)。我遇到了类似的问题。通过对我的控制器的AJAX
请求,返回了带有HTML
的字符串,但我无法将其附加到DOM
。然而,经检查,它出现在DOM
中。原来问题出在selectpicker
类上。删除后,HTML
被成功追加,元素自然没有按预期运行。
经过一番搜索,我发现了以下解决方案:
$('.selectpicker')。selectpicker('refresh')
找到它并解释了为什么会发生这种情况。
希望这有帮助
干杯 我也面临类似的问题。通过对我的控制器的
AJAX
请求,返回了带有HTML
的字符串,但我无法将其附加到DOM
。然而,经检查,它出现在DOM
中。原来问题出在selectpicker
类上。删除后,HTML
被成功追加,元素自然没有按预期运行。
经过一番搜索,我发现了以下解决方案:
$('.selectpicker')。selectpicker('refresh')
找到它并解释了为什么会发生这种情况。
希望这有帮助
干杯 如果动态填充
,我的建议是在完成附加部分后刷新.selectpicker
$(“.selectpicker”).selectpicker('refresh')
如果您要动态填充
,我的建议是在完成附加部分后刷新。选择器
$(“.selectpicker”).selectpicker('refresh')代码>同时添加jQuery也添加jQuery