当包含在自定义可折叠div中时，jQuery选择不显示数据占位符

时间：2019-03-11 18:19:04

标签： javascript jquery html css jquery-chosen 

         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将按预期工作：

<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”中时，过滤器仍可按预期工作，但data-placeholder元素未显示。我显示或隐藏此部分的功能如下：

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

1 个答案:

答案 0 :(得分：2)

只需从<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>

相关问题
最新问题