Search code examples
javascriptjqueryhtmlmaterialize

Issue creating a select menu dynamically using object data and materialize

I am trying to place a select menu into a modal and have a strange issue in that the select menu is loaded with display:none so it is hidden is that normal behaviour with materialize?

The name field above the select only shows the first entry from the select unless I remove the display:none in the inspector which then allows me to choose any value from my select with it repeating that value above. What am I doing wrong?

enter image description here

this is the div I am adding the select into

<div class="input-field col s12">
                    <select class="custName">
                    </select>
                    <label>Select Customer</label>
                </div>

I am calling this at the end of my html page

<script>$(document).ready(function(){
$('select').formSelect();  
});</script>

creating my selects options here

const custData = (data) => {
if (data.length) {
    let html = '';
    data.forEach(doc => {
        const cust = doc.data();
        //console.log(cust);
        const select = `
  <select>
    <option value=${cust.customerId}>${cust.name},  ${cust.address.postCode}</option>
  </select>
  `;
        html += select;
    });
    customerList.innerHTML = html;
} else {
    customerList.innerHTML = '<ul class="center-align">no data</ul>'
  }
};

Please put me out of my misery

Solution

  • The issue is that, your $('select').formSelect(); is being executed before you are populating your option tags.

    The Solution: Make the intialization call after your option tag population code.

    Note: don't enclose every option tag with a select tag in your custData() function

    For example, this one executes initialization statement before population : 

    <!DOCTYPE html>
<html>

<head>
    <script
        src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>

<body>
    <div class="input-field col s12">
        <select id="s_1" class="custName">
        </select>
        <label>Select Customer</label>
    </div>
    <script type="text/javascript">
    var select = document.getElementById("s_1");
    var options = "<select><option value = 1>1</option></select><select><option value = 2>2</option></select><select><option value = 3>3</option></select>";
     setTimeout(function(){ select.innerHTML = options; }, 1000);
    
   
    $(document).ready(function() {
        $('select').formSelect();
    });
    </script>
</body>

</html>

    This one Executes initialization after population:

    <!DOCTYPE html>
<html>

<head>
    <script
        src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>

<body>
    <div class="input-field col s12">
        <select id="s_1" class="custName">
        </select>
        <label>Select Customer</label>
    </div>
    <script type="text/javascript">
    var select = document.getElementById("s_1");
    var options = "<select><option value = 1>1</option></select><select><option value = 2>2</option></select><select><option value = 3>3</option></select>";
     setTimeout(function(){ select.innerHTML = options;  $('select').formSelect();}, 3000);
    
   
    $(document).ready(function() {
        $('select').formSelect();
    });
    </script>
</body>

</html>