Html not rendering appended element in Jquery

Question

I am trying to add an option to a select element in html from Jquery. I used a form to submit the name of the category to be added to the select element. The new category option shows when inspecting the code, however, it is not showing in the document.

$(document).ready(function () {
  // initialization
  $('select').formSelect();

 $('#myForm').submit(function (e) {
  let category = $('#in').val();
  $('#selection').append(`<option value="${category}">${category}</option>`);
  e.preventDefault();
 })
});

<!DOCTYPE html>
<html>
<head>
 <!--Import Google Icon Font-->
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 <!-- Compiled and minified CSS -->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
 <!--Let browser know website is optimized for mobile-->
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />

 <title>My Lab</title>
</head>
 <body>
<div class="container">
 <form id="myForm">
 <div class="input-field">
 <label for="in">Enter category</label>
 <input type="text" id="in">
 </div>
 <select id="selection">
 <option value="" selected disabled>Category</option>
 <option value="1">1</option>
 </select>
 <button class="btn" type="submit">Submit</button>
 </form>
</div>
 </body>
<!--Import jQuery before materialize.js-->
 <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
 <script src="app.js"></script>
 </html>

Rory McCrossan · Accepted Answer · 2018-05-08 10:44:21Z

1

The issue is because you're using a plugin which rebuild the select element in HTML which allows you to style it as you like. This means that any new options appended to the select after initialisation are not detected.

To fix this, call formSelect() again in your form submit event handler:

$(document).ready(function() {
  $('select').formSelect();

  $('#myForm').submit(function(e) {
    e.preventDefault();
    let category = $('#in').val();
    $('#selection').append(`<option value="${category}">${category}</option>`);

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

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>

<div class="container">
  <form id="myForm">
    <div class="input-field">
      <label for="in">Enter category</label>
      <input type="text" id="in">
    </div>
    <select id="selection">
      <option value="" selected disabled>Category</option>
      <option value="1">1</option>
    </select>
    <button class="btn" type="submit">Submit</button>
  </form>
</div>

It should be noted, however, that the user experience for this is rather odd. You have to type in the field, then submit the form (which seems to do nothing) and then the select which is above the submit button has it's options changed. It's not very intuitive.

answered May 8, 2018 at 10:44

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Elon Musk Over a year ago

I just copied a portion of my actual program I was writing to minimise space here.

Rory McCrossan Over a year ago

No problem, glad to help

Collectives™ on Stack Overflow

Html not rendering appended element in Jquery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related