HTML не отображает добавленный элемент в Jquery - PullRequest
Новая
       1

HTML не отображает добавленный элемент в Jquery

0 голосов
/ 08 мая 2018

Я пытаюсь добавить опцию для выбора элемента в HTML из Jquery. Я использовал форму для отправки названия категории, которая будет добавлена ​​в элемент select. Новая опция категории отображается при проверке кода, однако она не отображается в документе. 

$(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>

1 Ответ

0 голосов
/ 08 мая 2018

Проблема в том, что вы используете плагин, который перестраивает элемент select в HTML, который позволяет вам стилизовать его так, как вам нравится. Это означает, что любые новые параметры, добавленные к select после инициализации, не обнаруживаются.

Чтобы это исправить, снова вызовите formSelect() в вашей форме submit Обработчик событий: 

$(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>

Следует отметить, однако, что пользовательский опыт для этого довольно странный. Вы должны напечатать в поле, затем отправить форму (которая, кажется, ничего не делает), а затем у выбора, который находится над кнопкой отправки, изменились его параметры. Это не очень интуитивно понятно.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...