javascript - 当包含在自定义可折叠 div 中时,Jquery 选择不显示数据占位符
问题描述
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "block") {
x.style.display = "none";
console.log(document.getElementById("myDIV"))
console.log("If")
} else {
x.style.display = "block";
console.log(document.getElementById("myDIV"))
console.log("Else")
}
}
$(".chosen-select").chosen();
$('button').click(function(){
$(".chosen-select").val('').trigger("chosen:updated");});
#myInput {
background-repeat: no-repeat; /* Do not repeat the icon image */
width: 100%; /* Full-width */
font-size: 12px; /* Increase font-size */
padding: 12px 20px 12px 40px; /* Add some padding */
border: 1px solid #ddd; /* Add a grey border */
margin-bottom: 12px; /* Add some space below the input */
}
#myTable {
border-collapse: collapse; /* Collapse borders */
width: 100%; /* Full-width */
border: 1px solid #ddd; /* Add a grey border */
font-size: 14px; /* Increase font-size */
}
#myTable th, #myTable td {
text-align: left; /* Left-align text */
padding: 12px; /* Add padding */
}
#myTable tr {
/* Add a bottom border to all table rows */
border-bottom: 1px solid #ddd;
}
#myTable tr.header, #myTable tr:hover {
/* Add a grey background color to the table header and on hover */
background-color: #f1f1f1;
}
#myDIV{
display: none;
}
.chosen-container.chosen-container-single {
width: 300px !important; /* or any value that fits your needs */
}
.chosen-container.chosen-container {
width: 350px !important; /* or any value that fits your needs */
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
<p>Click the "Filters" button to expand additional filters:</p>
<button onclick="myFunction()">Secondary Filters</button>
<br>
<br>
<div id="myDIV">
<select id="second" data-placeholder="All" class="chosen-select" multiple style="width:350px;" tabindex="4">
<option value=""></option>
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="American Samoa">American Samoa</option>
<option value="Andorra">Andorra</option>
<option value="Angola">Angola</option>
<option value="Anguilla">Anguilla</option>
</select>
</div>
我为正在构建的 d3.js 仪表板提供了一个简单的选择多项选择过滤器。当代码如下时,选择按预期工作:
<select id="second" data-placeholder="All" class="chosen-select" multiple style="width:350px;" tabindex="4">
<option value=""></option>
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="American Samoa">American Samoa</option>
<option value="Andorra">Andorra</option>
<option value="Angola">Angola</option>
<option value="Anguilla">Anguilla</option>
</select>
当我将它嵌套在 div id="myDIV" 中时,过滤器仍然按预期工作,但数据占位符元素不显示。我显示或隐藏此部分的功能如下:
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
我有一个最初的问题,其中选择在 div 中被设置为零宽度,但我能够在 CSS 中解决这个问题:
.chosen-container.chosen-container {
width: 350px !important; /* or any value that fits your needs */
}
它在#myDiv 之外工作的事实让我认为它可能是另一个 CSS 问题,但我找不到解决方案?
解决方案
只需 <option value=""></option>
从 中删除select
即可查看data-placeholder
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "block") {
x.style.display = "none";
console.log(document.getElementById("myDIV"))
console.log("If")
} else {
x.style.display = "block";
console.log(document.getElementById("myDIV"))
console.log("Else")
}
}
$(".chosen-select").chosen();
$('button').click(function(){
$(".chosen-select").val('').trigger("chosen:updated");});
#myInput {
background-repeat: no-repeat; /* Do not repeat the icon image */
width: 100%; /* Full-width */
font-size: 12px; /* Increase font-size */
padding: 12px 20px 12px 40px; /* Add some padding */
border: 1px solid #ddd; /* Add a grey border */
margin-bottom: 12px; /* Add some space below the input */
}
#myTable {
border-collapse: collapse; /* Collapse borders */
width: 100%; /* Full-width */
border: 1px solid #ddd; /* Add a grey border */
font-size: 14px; /* Increase font-size */
}
#myTable th, #myTable td {
text-align: left; /* Left-align text */
padding: 12px; /* Add padding */
}
#myTable tr {
/* Add a bottom border to all table rows */
border-bottom: 1px solid #ddd;
}
#myTable tr.header, #myTable tr:hover {
/* Add a grey background color to the table header and on hover */
background-color: #f1f1f1;
}
#myDIV{
display: none;
}
.chosen-container.chosen-container-single {
width: 300px !important; /* or any value that fits your needs */
}
.chosen-container.chosen-container {
width: 350px !important; /* or any value that fits your needs */
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
<p>Click the "Filters" button to expand additional filters:</p>
<button onclick="myFunction()">Secondary Filters</button>
<br>
<br>
<div id="myDIV">
<select id="second" data-placeholder="All" class="chosen-select" multiple style="width:350px;" tabindex="4">
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="American Samoa">American Samoa</option>
<option value="Andorra">Andorra</option>
<option value="Angola">Angola</option>
<option value="Anguilla">Anguilla</option>
</select>
</div>
推荐阅读
- python - 如何获取我为多人运行的 python 脚本的路径
- java - Spring Boot 控制台应用程序:调用 init 方法失败;嵌套异常是 java.lang.NoClassDefFoundError: javax/transaction/SystemException
- neo4j - 在 neo4j 开始时执行命令
- c# - 如何在 c# 中检测表单外的组合键,例如 Shift + (0-9,AZ,az,Symbols)
- c++ - ostream_iterator 用于向量
> - vb.net - 将文本框更新为与后台工作人员不同的形式
- javascript - 当您将鼠标悬停在图像上的特定区域时如何显示下拉菜单?(HTML、CSS)
- php - 如何使 PhpStorm 显示由 @method 声明的方法引发的异常(或从魔术方法 docblock 继承它们)?
- google-app-engine - Google App Engine 静态网站处理程序通配符路由
- python - `eb init` 因 pkg_resources.ContextualVersionConflict PyYAML 4.1 而失败