Changer la valeur de materialize select box par jquery

Je veux changer de matérialiser boîte de sélection valeur par jquery.

Je suis en utilisant $('#myselect').val('1'); sur onchange cas de d'autres de sélectionner la zone, mais il ne fonctionne.

$("#select1").change(function() {
    $('#myselect').val('1');
});

source d'informationauteur phpboy | 2015-05-20

  1. 24

    Il semble bien fonctionner pour moi, la modification de la première liste déroulante, réinitialise la valeur de la deuxième liste déroulante pour 1.

    J'ai fait une grossière mise en œuvre sur jsFiddle: http://jsfiddle.net/55r8fgxy/1/

    <select id="select1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

<select id="myselect">    
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

    JS:

    $(function() {
    $("#select1").on('change', function() {
        $('#myselect').val("1");

        //re-initialize material-select
        $('#myselect').material_select();
    });
});
  2. 9

    Comme suggéré par @logikal, vous avez réussi à re-Initialiser 

    $("#myselect").material_select()
  3. 3

    Plutôt que de l'utiliser .val(), c'est plus propre pour la valeur définie comme d'habitude avec jQuery :

    $('#my-select').find('option[value="my-value"]').prop('selected', true);
$("#my-select").material_select();
  4. 2

    À l'aide de délégués de l'événement résout le problème pour moi.

    HTML

     <div class="input-field col s10" id="pickerContainer">
 <select>
            <option value="" disabled selected>Choose your option</option>
            </select>
          </div>

    JS

    $('#pickerContainer').on('change', 'select', function(){
 console.log("got you");
});
  5. 1

    Ceci est similaire à ce logikal répondu, mais je pense que est plus propre:

    $(".your-component-class").change(function(){

   //your code..


   //re-initialize component
   $(this).material_select();    
});
  6. 1

    Pour une nouvelle matérialiser 1.0.0 utilisation .select() au lieu de .material_select()

    Solution sans ré-initialisation.

    function msValue (selector, value) {
 selector.val(value).closest('.select-wrapper').find('li').removeClass("active").closest('.select-wrapper').find('.select-dropdown').val(value).find('span:contains(' + value + ')').parent().addClass('selected active');
}

    Alors utilisez simplement 

    msValue($("#select_id"), "value_here")
  7. 0
    $('#myselect').formSelect() ;

    La nouvelle méthode est formSelect(), utilisez ce après avoir mis à jour le sélectionner.

  8. -1

    J'ai trouvé la bonne solution de ici

    Pour plusieurs à se matérialiser

    <div class="input-field col s12">
<select multiple>
    <option value="" disabled selected>Choose your option</option>
    <option value="1" selected>Option 1</option>
    <option value="2">Option 2</option>
    <option value="3" selected>Option 3</option>
</select>
<label>Materialize Multiple Select</label>

    Et maintenant, vous juste un peu de changement dans votre section Javascript et c'est l'url:

    <script src="http://materializecss.com/bin/materialize.js" />

    au lieu de 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.2/js/materialize.min.js"></script>

    ou tout autre lien de materialize.min.js

    Et pour de multiples sélectionnez activation :

    $(document).ready(function () {
        $('select').material_select();
    });

    C'est tout.
    Vous pouvez le vérifier démonstration de cette solution : JSFiddle