javascript - 当包含在自定义可折叠 div 中时，Jquery Chosen 不显示数据占位符

Question

         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 问题，但我找不到解决方案？

Answer 1

只需删除 <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>