Jquery 选择包含在自定义可折叠内容中时不显示数据占位符 div
Jquery Chosen not showing data-placeholder when contained within custom collapsable div
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>
我有一个简单的选择多个 select 过滤器用于我正在构建的 d3.js 仪表板。当代码如下时,select 正常工作:
<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>
我有一个初始问题,其中 select 在 div 中被设置为零宽度,但我能够在 CSS 中解决这个问题:
.chosen-container.chosen-container {
width: 350px !important; /* or any value that fits your needs */
}
它在 #myDiv 之外工作的事实让我认为它可能是另一个 CSS 问题,但我找不到解决方案?
只需从 select
中删除 <option value=""></option>
即可看到 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>
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>
我有一个简单的选择多个 select 过滤器用于我正在构建的 d3.js 仪表板。当代码如下时,select 正常工作:
<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>
我有一个初始问题,其中 select 在 div 中被设置为零宽度,但我能够在 CSS 中解决这个问题:
.chosen-container.chosen-container {
width: 350px !important; /* or any value that fits your needs */
}
它在 #myDiv 之外工作的事实让我认为它可能是另一个 CSS 问题,但我找不到解决方案?
只需从 select
中删除 <option value=""></option>
即可看到 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>