it-roy-ru.com

Как динамически изменить <select> в материализованной среде CSS

Я только начал использовать frameworkizeize CSS. Теперь materialize преобразует любой тег select в коллекцию элементов ul и li. До этого, используя JQuery, я смог сделать это:

var $selectDropdown = $("#dropdownid");
$selectDropdown.empty();
$selectDropdown.html(' ');
var value = "some value";
$selectDropdown .append($("<option></option>").attr("value",value).text(value));

Мой HTML это просто образец выбора тега:

Раньше это работало. Теперь это не удается. Что может быть альтернативой для динамического повторного заполнения этого раскрывающегося списка с использованием JavaScript?

24
user1432882

Согласно Документы по материализации форм :

Кроме того, вам потребуется отдельный вызов для любых динамически генерируемых элементов select, которые генерирует ваша страница

Таким образом, лучший способ - просто повторно связать сгенерированный выбор с дополнительным вызовом .material_select().

Для повторного использования вы можете настроить слушателя, когда элементы изменились и затем запускать этого слушателя всякий раз, когда вы обновляете исходный выбор

// 1) setup listener for custom event to re-initialize on change
$('select').on('contentChanged', function() {
  $(this).material_select();
});

// 2a) Whenever you do this --> add new option
$selectDropdown.append($("<option></option>"));

// 2b) Manually do this --> trigger custom event
$selectDropdown.trigger('contentChanged');

Преимущество этого заключается в том, что требуется только обновить конкретный элемент select, который изменился.

Демонстрация в jsFiddle & Фрагменты стека:

$(function() {

  // initialize
  $('.materialSelect').material_select();

  // setup listener for custom event to re-initialize on change
  $('.materialSelect').on('contentChanged', function() {
    $(this).material_select();
  });

  // update function for demo purposes
  $("#myButton").click(function() {
    
     // add new value
    var newValue = getNewDoggo();
    var $newOpt = $("<option>").attr("value",newValue).text(newValue)
    $("#myDropdown").append($newOpt);

    // fire custom event anytime you've updated select
    $("#myDropdown").trigger('contentChanged');
    
  });

});

function getNewDoggo() {
  var adjs =  ['Floofy','Big','Cute','Cuddly','Lazy'];
  var nouns = ['Doggo','Floofer','Pupper','Fluffer', 'Nugget'];
  var newOptValue = adjs[Math.floor(Math.random() * adjs.length)] + " " + 
                    nouns[Math.floor(Math.random() * nouns.length)];
  return newOptValue;
}
body { padding: 25px}
<link  href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script>

<button class="waves-effect waves-light btn" id="myButton">
  Add New Option to Dropdown
</button>

<select id="myDropdown" class="materialSelect">
  <option value="Happy Floof">Happy Floof</option>
  <option value="Derpy Biscuit">Derpy Biscuit</option>
</select>

47
KyleMit

Вы можете повторно инициализировать элемент select после успешного связывания ваших данных. Вот так,

$('select').material_select();

Похоже на это: 

var next_id = $(".mtr-select");
$.each(json, function(key, value) {
    $(next_id).append($("<option></option>").attr("value", value.id).text(value.name));
});
$(next_id).material_select();

Он привязывает значения своих параметров к новому элементу ul>li, создавая объект dom при загрузке.

9
Nimsrules

Это верное решение для MaterializeCss v0.96.1. В версии 0.97.0 это не работает: кажется, что есть ошибка, которая добавляет каретку в HTML.

Вот код для v0.97.0:

$(document).ready(function() {

  // Initialize
  $('select').material_select();
  
  $("button").click(function() {
    
    // Clear the content
    $("select").empty().html(' ');

    // And add a new value
    var value = "New value";
    $("select").append(
      $("<option></option>").attr("value",value).text(value)
    );

    // Update the content clearing the caret
    $("select").material_select('update');
    $("select").closest('.input-field').children('span.caret').remove();
  });

 
});
<link  href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/js/materialize.min.js"></script>

<button class="btn-large blue waves-effect waves-light">Change</button>

<div class="input-field">

    <select>
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </select>

</div>

6
Davide Caruso

Это работает для Материализация 1.0.0-RC.1 :

ситуация: У меня есть два поля; во-первых, чтобы выбрать категорию 

<select name="category" id="category">
    <option value="0">Choisissez une Catégorie</option>
    <option value="1">Audios</option>
    <option value="2">Vidéos</option>
    <option value="3">Applications</option>
    <option value="4">Jeux Vidéos</option>
</select>

после того, как категория выбрана, вторая команда select id = "subcategory" заполняется хорошими подкадрами в соответствии с родительской категорией:

<select name="subcategory" id="subcategory" disabled="disabled">
    <option value="0">Choisissez une sous-catégorie</option>
</select>

var subCategoriesNames = ['Tout', ['Tout', 'Musiques', 'Concerts', 'Comédies'], ['Tout', 'Films', 'Séries TV', 'Emissions TV', 'Documentaires', 'Animations', 'Animations Séries', 'Concerts', 'Sports'], ['Tout', 'Livres', 'Magazines', 'Presses', 'Mangas', 'BD'], ['Tout', 'Formations', 'Android', 'Windows', 'Linux', 'Web', 'Emulateurs'], ['Tout', 'Android', 'Windows', 'Consoles', 'Linux']],
subCategoriesIds = ['1', ['2', '3', '4', '5'], ['6', '7', '8', '9', '10', '11', '12', '13', '14'], ['15', '16', '17', '18', '19', '20'], ['21', '22', '23', '24', '25', '26', '27'], ['28', '29', '30', '31', '32']],
idx = 0,
subsName;

$(document).ready(function(){
    $('#category').on('change', function(){
        idx = this.selectedIndex;
        if(idx > 0){
            $('select#subcategory').attr('disabled', false);
            for(subsName in subCategoriesNames[idx]) $('select#subcategory').append('<option value="'+subCategoriesIds[idx][subsName]+'">'+subCategoriesNames[idx][subsName]+'</option>');
        }else{
            $('select#subcategory').attr('disabled', true);
        }
        var subcatSelectElem = document.querySelectorAll('#subcategory');
        var subcatSelectElem = M.FormSelect.init(subcatSelectElem, {});
    })
});
2
Huntr

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

Я нашел это, который прекрасно работает для меня

    <select class="className"></select> 
    **$('.className').formSelect().append($('<option>'+data[i]+'</option>'))**

надеюсь, что это работает и для вас

1
Peter Braganza
$(document).ready(function() {

  // initialize
  $('select').material_select();


  $("#myButton").click(function() {

    // clear contents
    var $selectDropdown = 
      $("#dropdownid")
        .empty()
        .html(' ');

    // add new value
    var value = "some value";
    $selectDropdown.append(
      $("<option></option>")
        .attr("value",value)
        .text(value)
    );

    // trigger event
    $selectDropdown.trigger('contentChanged');
  });


  $('select').on('contentChanged', function() {
    // re-initialize (update)
    $(this).material_select();
  });

});



     <link  href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1 /css/materialize.min.css" rel="stylesheet">
     <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3 /jquery.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script>

  <a class="waves-effect waves-light btn" id="myButton">
  Change Dropdown
  </a>

<select id="dropdownid" >
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>
0
Sayed Azharuddin
$('select').material_select(); // for initializing the material select box
$("select").closest('.input-field').children('.select-wrapper').children("span").html("");
0
rahul shukla

$(document).ready(function() {

  // initialize
  $('select').material_select();

  
  $("#myButton").click(function() {
    
    // clear contents
    var $selectDropdown = 
      $("#dropdownid")
        .empty()
        .html(' ');

    // add new value
    var value = "some value";
    $selectDropdown.append(
      $("<option></option>")
        .attr("value",value)
        .text(value)
    );

    // trigger event
    $selectDropdown.trigger('contentChanged');
  });


  $('select').on('contentChanged', function() {
    // re-initialize (update)
    $(this).material_select();
  });
  
});
<link  href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script>

<a class="waves-effect waves-light btn" id="myButton">
  Change Dropdown
</a>

<select id="dropdownid" >
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

0
Sayed Azharuddin