如何使用Materialize加载选择选项

编程问答 2022-08-11

问题描述

我试图在Materialize框架中使用动态选择，但无法获得预期的结果。

页面加载后，如果您更改第一个选择（固定选择），我们将无法选择动态选择上的所有选项。我举了一个简单的例子来说明这个问题：

没有实现 

//ready function -------------------------
    $( document ).ready(function() {
        startDinamicSelect();
    }); 

    
    // Creating the function to add on listener
    function startDinamicSelect() {
        // Numbers array
        var numbersList = {
          1 : ['1','3','5','7'],2 : ['2','4','6','8'],3 : ['1','2','7',}
    
        // Adding function to onChange event
        document.querySelector('#fixedSelect').addEventListener("change",function(){
    
        // Get values of the object
        var items = numbersList[this.value];
          
        // Cleaning select
        var selectDinamico = document.querySelector('#dinamicSelect');
        selectDinamico.innerHTML = '';
    
        // Addinng the items as selected on the first select
        items.forEach(function(item){
            var option  = document.createElement("option");
            option.value = item;
            option.text = item;
            selectDinamico.appendChild(option);
          });
        });
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body style="margin-left: 20px;margin-right: 20px;margin-top: 10px;">
    
    <html>
    Type:
      <select name="fixedSelect" id="fixedSelect">
        <option value="" selected></option> 
        <option value="1" >Odd numbers</option> 
        <option value="2" >Pair numbers</option>
        <option value="3" >Both</option>
      </select>

     <hr>

    Number:
      <select name="dinamicSelect" id="dinamicSelect"></select>

    </html>
</body>

添加Materialize框架后，动态选择无法正常工作。仅显示第一个选项，而不能更改选择

具有实体化功能 

//ready function -------------------------
    $( document ).ready(function() {
        startDinamicSelect();
        
        $('select').formSelect();
    }); 

    
    // Creating the function to add on listener
    function startDinamicSelect() {
        // Numbers array
        var numbersList = {
          1 : ['1',function(){
    
        // Get values of the object
        var items = numbersList[this.value];
          
        // Cleaning select
        var selectDinamico = document.querySelector('#dinamicSelect');
        selectDinamico.innerHTML = '';
    
        // Addinng the items as selected on the first select
        items.forEach(function(item){
            var option  = document.createElement("option");
            option.value = item;
            option.text = item;
            selectDinamico.appendChild(option);
          });
      $('select').formSelect('destroy');
        });
        
    }
<!-- Compiled and minified CSS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>

<body style="margin-left: 20px;margin-right: 20px;margin-top: 10px;">
    
    <html>
    Type:
      <select name="fixedSelect" id="fixedSelect">
        <option value="" selected></option> 
        <option value="1" >Odd numbers</option> 
        <option value="2" >Pair numbers</option>
        <option value="3" >Both</option>
      </select>

     <hr>

    Number:
      <select name="dinamicSelect" id="dinamicSelect"></select>

    </html>
</body>

我尝试使用没有结果

$('select').material_select('destroy');

$('select').formSelect('destroy');

有人可以说出什么问题吗？代码在哪里不能正常工作？

解决方法

我解决了添加触发器以监听contendChanged的麻烦

    //ready function -------------------------
    $( document ).ready(function() {
        startDinamicSelect();
        
        $('select').formSelect();
    }); 

    
    // Creating the function to add on listener
    function startDinamicSelect() {
        // Numbers array
        var numbersList = {
          1 : ['1','3','5','7'],2 : ['2','4','6','8'],3 : ['1','2','7',}
    
        // Adding function to onChange event
        document.querySelector('#fixedSelect').addEventListener("change",function(){
        
    
        // Get values of the object
        var items = numbersList[this.value];
          
        // Cleaning select
        var selectDinamico = document.querySelector('#dinamicSelect');
        selectDinamico.innerHTML = '';
    
        // Addinng the items as selected on the first select
        items.forEach(function(item){
            var option  = document.createElement("option");
            option.value = item;
            option.text = item;
            selectDinamico.appendChild(option);
          });
      
          
    //NEW CODE ADDED -----------------------
        $("#dinamicSelect").trigger('contentChanged');        
          
        });
        
        

  // NEW CODE ADDED
  $('#dinamicSelect').on('contentChanged',function() {
    $(this).formSelect();
  });



    }
<!-- Compiled and minified CSS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>

<body style="margin-left: 20px;margin-right: 20px;margin-top: 10px;">
    
    <html>
    Type:
      <select name="fixedSelect" id="fixedSelect">
        <option value="" selected></option> 
        <option value="1" >Odd numbers</option> 
        <option value="2" >Pair numbers</option>
        <option value="3" >Both</option>
      </select>

     <hr>

    Number:
      <select name="dinamicSelect" id="dinamicSelect"></select>

    </html>
</body>

javascriptmaterializeselectselectselect