Как обновить / обновить выделение в Javascript (vanilla) с помощью Materialise? - PullRequest
Новая
       25

Как обновить / обновить выделение в Javascript (vanilla) с помощью Materialise?

0 голосов
/ 09 июня 2019

Я пытаюсь обновить параметры в select-widget, используя Javascript (vanilla) с Materialize. Я предполагаю, что это связано с «динамически генерируемыми элементами выбора», но я не уверен, что делать?

В соответствии с Материализация Мне может потребоваться рассмотреть возможность реализации: «Кроме того, вам потребуется отдельный вызов для любых динамически генерируемых элементов выбора, которые генерирует ваша страница.» . К сожалению, я не уверен (не нашел), как я могу "динамически генерировать элементы выбора", чтобы обновить / обновить виджет выбора?

Вот мои родственные коды:

HTML 

<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!--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/css/materialize.min.css">
<div class = "container">
    <div class="row">
      <div class="input-field col s3">
        <button id = "btn" class="waves-effect waves-light btn-small"><i class="material-icons left">person_add</i>Add</button>
      </div>
      <div class="row">
      <div class="input-field col s3">
        <button id = "btnRemove" class="waves-effect waves-light btn-small"><i class="material-icons left">delete</i>Remove</button>
      </div>
    </div> <!-- CLOSE ROW -->

    <div class="row">
      <div>
        <div style = "position:relative; top:-10px;" class="input-field col s6">
          <select id="voteNoList" onchange="PersonInfo()" required>
            <option value="">Vote Number?</option>
            <!-- <?!= currListNo; ?>
               -->
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
          </select>
        </div>
      </div>
    </div> <!-- CLOSE ROW -->
</div> <!-- CLOSE CONTAINER -->

Javascript (ваниль) 

  //------------
  // AUTO
  //------------
  // Select
  document.addEventListener('DOMContentLoaded', function() {
    var el = document.querySelectorAll('select');
    var instances = M.FormSelect.init(el);
  });

  // Button - Add
  document.getElementById("btn").addEventListener("click", PersonInfo);

  // Button - Remove
  document.getElementById("btnRemove").addEventListener("click", PersonDelete);

  function PersonInfo(){

    debugger;
    var selectobject = document.createElement("option");
    selectobject.text = "Text55";
    selectobject.value = "myvalue55";
    var selectList = document.getElementById("voteNoList");
    selectList.appendChild(selectobject);  
    debugger;
    return;        
  }

  function PersonDelete(){

    debugger;
    var selectobject=document.getElementById("voteNoList");
    for (var i=0; i<selectobject.length; i++){
      if (selectobject.options[i].value == "2"){
         selectobject.remove(i);
        break;
      }
    } 
    debugger;
    return;     
  }

Я ожидал иметь виджет выбора, который может увеличивать и уменьшать параметры в зависимости от того, как были нажаты кнопки. (Заметьте, что для простоты я жестко запрограммирован, чтобы иметь возможность добавить только одну и ту же опцию и удалить опцию, равную "2".)

Хотя я не смог найти решение в Javascript (vanilla), я смог найти решение jQuery, как видно из ссылка .

Мои коды также доступны в CodePen , где в режиме отладки можно увидеть, что различные числовые опции selectList меняются при нажатии кнопок.

1 Ответ

0 голосов
/ 10 июня 2019

Очевидно, что решение для моего случая было добавить M.FormSelect.init(selectList); перед return. Коды с обновлением / решением доступны в CodePen .

...