it-swarm.com.de

Dynamisches Ändern von <select> im Materialise-CSS-Framework

Ich habe gerade angefangen, das materialise css-Framework zu verwenden. Materialize konvertiert nun jedes ausgewählte Tag in eine Sammlung von ul- und li-Elementen. Vor der Verwendung von JQuery konnte ich Folgendes tun:

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

Meine HTML-Datei ist nur ein Beispiel-Auswahl-Tag:

Vorher hat das funktioniert. Jetzt scheitert es. Was wäre eine Alternative, um diese Dropdown-Liste mit Javascript dynamisch aufzufüllen?

24
user1432882

Nach den Dokumenten zu Materialise Forms :

Darüber hinaus benötigen Sie einen separaten Aufruf für alle dynamisch generierten Auswahlelemente, die Ihre Seite generiert

Am besten binden Sie also einfach das generierte select mit einem zusätzlichen Aufruf an .material_select().

Zur Wiederverwendbarkeit können Sie einen Listener einrichten, wenn sich die Elemente geändert haben und diesen Listener jedes Mal auslösen, wenn Sie die ursprüngliche Auswahl aktualisieren

// 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');

Dies hat den Vorteil, dass nur das bestimmte ausgewählte Element, das geändert wurde, aktualisiert werden muss.

Demo in jsFiddle & Stack-Snippets:

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

Sie können das select-Element erneut initialisieren, nachdem Ihre Daten erfolgreich gebunden wurden. Wie so

$('select').material_select();

Ähnlich wie dies: 

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();

Es bindet seine Optionswerte an das neue ul>li-Element, indem das dom-Objekt beim Laden erstellt wird.

9
Nimsrules

Dies ist eine gültige Lösung für MaterializeCss v0.96.1. In Version 0.97.0 funktioniert es nicht: Es scheint, dass es einen Fehler gibt, der ein Caret im HTML-Code anfügt.

Hier der Code für 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

Dies funktioniert für Materialise 1.0.0-rc.1 :

die Situation: Ich habe zwei Felder; ist zunächst die Auswahl einer Kategorie 

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

nachdem die Kategorie ausgewählt wurde, wird die zweite Auswahl-ID = "Unterkategorie" mit guten Unterkategorien entsprechend der übergeordneten Kategorie gefüllt:

<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

Hallo, wie Sie Materialise Framework verwenden, erzeugt einfach mit dem Befehl andere Containerelemente für dasselbe . Daher wird mit dem Tag jquery select nicht die erforderliche Aufgabe ausgeführt

Ich fand das, was für mich gut funktioniert

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

ich hoffe, das funktioniert auch für Sie

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