Выбранный Jquery не показывает заполнитель данных, если он содержится в настраиваемом сворачиваемом элементе div - PullRequest
Новая
       17

Выбранный Jquery не показывает заполнитель данных, если он содержится в настраиваемом сворачиваемом элементе div

0 голосов
/ 11 марта 2019 

         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 было задано значение ширины нуля, но я смог исправить это в CSSwith: 

        .chosen-container.chosen-container {
width: 350px !important; /* or any value that fits your needs */

}

Тот факт, что он работает вне #myDiv, заставляет меня думать, что это потенциально еще одна проблема CSS, но я не могу найти решение?

1 Ответ

2 голосов
/ 12 марта 2019

Просто удалите <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>
...