Materialize CSS - เลือกไม่ดูเหมือนจะแสดงผล

ฉันกำลังทำงานกับ CSS ที่เป็นรูปธรรมและดูเหมือนว่าฉันจะติดขัดกับช่องที่เลือก

ฉันใช้ตัวอย่างที่ให้มาจากไซต์ของพวกเขา แต่น่าเสียดายที่มันแสดงผลในมุมมองใด ๆ ฉันสงสัยว่าอาจมีคนอื่นช่วยได้

สิ่งที่ฉันกำลังพยายามทำคือสร้างแถวที่มีตัวเว้นวรรคท้าย 2 ตัวที่มีช่องว่างภายใน - จากนั้นภายในรายการสองแถวด้านในควรมีการป้อนข้อความค้นหาและรายการแบบเลื่อนลงเพื่อเลือกการค้นหา

นี่คือตัวอย่างที่ฉันกำลังดำเนินการจาก: http://materializecss.com/forms.html

ขอบคุณล่วงหน้า.

นี่คือตัวอย่างโค้ดที่เป็นปัญหา

<div class="row">
<form class="col s12">
    <div class="row">
        <div class="input-field col s2"></div>
        <div class="input-field col s5">
            <input id="icon_prefix" type="text" class="validate" />
            <label for="icon_prefix">Search</label>
        </div>
        <div class="input-field col s3">
            <label>Materialize Select</label>
            <select>
                <option value="" disabled="disabled" selected="selected">Choose your option</option>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
            </select>
        </div>
        <div class="input-field col s2"></div>
    </div>
</form>

เนื่องจากจะแทนที่ค่าเริ่มต้นของเบราว์เซอร์การเลือกสไตล์จึงต้องใช้ Javascript เพื่อเรียกใช้ คุณต้องรวมไฟล์ Materialize Javascript จากนั้นจึงโทร

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

หลังจากคุณโหลดไฟล์นั้นแล้ว

selectในความคิดของฉันการออกแบบฟังก์ชันการทำงานใน CSS ที่เป็นรูปธรรมนั้นเป็นเหตุผลที่ดีทีเดียวที่จะไม่ใช้มัน

คุณต้องเริ่มต้นองค์ประกอบที่เลือกmaterial_select()ตามที่ @ littleguy23 กล่าวถึง หากคุณไม่ทำเช่นนั้นช่องเลือกจะไม่ปรากฏขึ้นด้วยซ้ำ! ในแอป jQuery ที่ล้าสมัยฉันสามารถเริ่มต้นได้ในฟังก์ชันพร้อมเอกสาร เดาอะไรไม่ได้ทั้งฉันและคนอื่น ๆ ไม่ได้ใช้ jQuery ในวันนี้และเราไม่ได้เริ่มต้นแอพของเราในตะขอพร้อมเอกสาร

เลือกสร้างแบบไดนามิก จะเกิดอะไรขึ้นถ้าฉันสร้างการเลือกแบบไดนามิกเช่นเกิดขึ้นในเฟรมเวิร์กเช่น Ember ซึ่งสร้างมุมมองได้ทันที ฉันต้องเพิ่มตรรกะในแต่ละมุมมองเพื่อเริ่มต้นกล่องเลือกทุกครั้งที่สร้างมุมมองหรือเขียนมุมมองมิกซ์อินเพื่อจัดการสิ่งนั้นให้ฉัน และที่แย่ไปกว่านั้น: เมื่อมีการสร้างมุมมองและในเงื่อนไข Ember didInsertElementถูกเรียกการเชื่อมโยงกับรายการตัวเลือกสำหรับกล่องเลือกอาจยังไม่ได้รับการแก้ไขดังนั้นฉันจึงต้องการตรรกะพิเศษในการสังเกตรายการตัวเลือกเพื่อรอจนกว่าจะถึง เติมข้อมูลก่อนทำการโทรไปยังไฟล์material_select. หากตัวเลือกมีการเปลี่ยนแปลงอย่างที่อาจทำได้ง่าย ๆmaterial_selectก็ไม่รู้และไม่อัปเดตเมนูแบบเลื่อนลง ฉันสามารถโทรmaterial_selectอีกครั้งเมื่อตัวเลือกเปลี่ยนไป แต่ดูเหมือนว่าจะไม่ทำอะไรเลย (ถูกเพิกเฉย)

กล่าวอีกนัยหนึ่งก็คือดูเหมือนว่าสมมติฐานการออกแบบที่อยู่เบื้องหลังช่องเลือกของ CSS ที่เป็นรูปธรรมก็คือพวกมันทั้งหมดอยู่ที่การโหลดหน้าเว็บและค่าของมันจะไม่เปลี่ยนแปลง

การนำไปใช้ จากมุมมองด้านสุนทรียศาสตร์ฉันยังไม่ชอบวิธีการที่ CSS ใช้งานแบบเลื่อนลงซึ่งเป็นรูปธรรมซึ่งก็คือการสร้างชุดเงาคู่ขนานขององค์ประกอบที่อื่นใน DOM จริงอยู่ทางเลือกเช่น select2 ทำสิ่งเดียวกันและอาจไม่มีวิธีอื่นในการบรรลุเอฟเฟกต์ภาพบางอย่าง (จริงเหรอ?) สำหรับฉันแล้วเมื่อฉันตรวจสอบองค์ประกอบฉันต้องการเห็นองค์ประกอบไม่ใช่รุ่นเงาที่ใครบางคนสร้างขึ้นอย่างน่าอัศจรรย์

เมื่อ Ember ทำให้มุมมองแย่ลงฉันไม่แน่ใจว่า CSS ที่เป็นรูปธรรมจะทำให้องค์ประกอบเงาที่สร้างขึ้น ที่จริงฉันค่อนข้างแปลกใจถ้าเป็นเช่นนั้น หากทฤษฎีของฉันถูกต้องเนื่องจากมุมมองถูกสร้างขึ้นและถูกทำลายลง DOM ของคุณจะกลายเป็นมลพิษโดยมีเงาแบบเลื่อนลงหลายสิบชุดที่ไม่ได้เชื่อมต่อกับสิ่งใดเลย สิ่งนี้ไม่เพียง แต่ใช้กับ Ember เท่านั้น แต่ยังใช้กับเฟรมเวิร์กฟรอนต์เอนด์ของ OPA ที่ใช้ MVC / เทมเพลตอื่น ๆ

ผูก ฉันยังไม่สามารถหาวิธีรับค่าที่เลือกในกล่องโต้ตอบเพื่อผูกกลับกับสิ่งที่มีประโยชน์ในกรอบงานเช่น Ember ที่เรียกใช้กล่องเลือกผ่าน{{view 'Ember.Select' value=country}}อินเทอร์เฟซประเภท กล่าวอีกนัยหนึ่งคือเมื่อมีการเลือกบางอย่างcountryจะไม่มีการอัปเดต นี่คือตัวทำลายข้อตกลง

คลื่น อย่างไรก็ตามปัญหาเดียวกันนี้ใช้กับเอฟเฟกต์ "wave" บนปุ่มต่างๆ คุณต้องเริ่มต้นทุกครั้งที่สร้างปุ่ม โดยส่วนตัวแล้วฉันไม่สนใจเกี่ยวกับเอฟเฟกต์ของคลื่นและไม่เข้าใจว่าเอะอะทั้งหมดนั้นเกี่ยวกับอะไร แต่ถ้าคุณต้องการคลื่นโปรดทราบว่าคุณจะใช้เวลาส่วนหนึ่งของชีวิตที่เหลืออยู่โดยกังวลว่าจะทำอย่างไร เริ่มต้นทุกปุ่มเมื่อสร้างขึ้น

ฉันขอขอบคุณในความพยายามของพวก CSS ที่เป็นรูปธรรมและมีเอฟเฟกต์ภาพที่ดีอยู่ที่นั่น แต่มันใหญ่เกินไปและมี gotcha มากเกินไปเช่นข้างบนที่จะเป็นสิ่งที่ฉันจะใช้ ตอนนี้ฉันกำลังวางแผนที่จะคัดลอก CSS ที่เป็นรูปธรรมออกจากแอปของฉันและกลับไปที่ Bootstrap หรือเลเยอร์ที่อยู่ด้านบนของ Suit CSS เครื่องมือของคุณควรทำให้ชีวิตของคุณง่ายขึ้นไม่ยากขึ้น

@ littleguy23 ถูกต้อง แต่คุณไม่ต้องการทำแบบ multi select ดังนั้นการเปลี่ยนแปลงโค้ดเพียงเล็กน้อย:

$(document).ready(function() {
    // Select - Single
    $('select:not([multiple])').material_select();
});

สิ่งนี้ใช้ได้ผลสำหรับฉันไม่มี jquery หรือเลือก wrapper ที่มีคลาสอินพุตเพียง material.js และ vanilla js นี้:

document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('select');
    var instances = M.FormSelect.init(elems);
});

อย่างที่คุณบอกได้ว่าฉันมีรูปแบบที่แท้จริงของ css และไม่ใช่ค่าเริ่มต้นของเบราว์เซอร์

ก็ใช้ได้เช่นกัน: class = "browser-default"

หากคุณใช้ Angularjs คุณสามารถใช้ปลั๊กอิน angular-materializeซึ่งมีคำสั่งที่มีประโยชน์ จากนั้นคุณไม่จำเป็นต้องเริ่มต้นใน js เพียงเพิ่มmaterial-selectในสิ่งที่คุณเลือก:

<div input-field>
    <select class="" ng-model="select.value1" material-select>
        <option ng-repeat="value in select.choices">{{value}}</option>
    </select>
</div>

วิธีแก้ปัญหาที่ได้ผลสำหรับฉันคือการเรียกฟังก์ชัน 'material_select' หลังจากโหลดข้อมูลตัวเลือกแล้ว หากคุณพิมพ์ค่า OptionsList.find (). count () ลงในคอนโซลจะเป็น 0 แรกจากนั้นไม่กี่มิลลิวินาทีต่อมารายการจะถูกเติมด้วยข้อมูล

Template.[name].rendered = function() {
    this.autorun(function() {
        var optionsCursor = OptionsList.find().count();
        if(optionsCursor > 0)
        {
            $('select').material_select();
        }
    });
};

สำหรับฉันไม่มีคำตอบอื่นใดที่ใช้ได้ผลเพราะฉันใช้ MaterializeCSS และ Meteor เวอร์ชันล่าสุดและมีความเข้ากันไม่ได้ระหว่างเวอร์ชัน jquery Meteor 1.1.10 ใช้ jquery 1.11 (การเอาชนะการพึ่งพานี้ไม่ใช่เรื่องง่ายและอาจทำให้ Meteor / Blaze พังได้) และการทดสอบ Materialize ด้วย jquery 2.2 ทำงานได้ดี ดู https://stackoverflow.com/a/34809976/2882279สำหรับข้อมูลเพิ่มเติม

นี่เป็นปัญหาที่ทราบแล้วเกี่ยวกับรายการแบบเลื่อนลงและการเลือกที่เป็นรูปธรรม 0.97.2 และ 0.97.3 สำหรับข้อมูลเพิ่มเติมโปรดดูที่https://github.com/Dogfalo/materialize/issues/2265และhttps://github.com/Dogfalo/materialize/commit/45feae64410252fe51e56816e664c09d83dc8931

ฉันใช้ MaterializeCSS เวอร์ชัน Sass ใน Meteor และแก้ไขปัญหาโดยใช้บทกวี: materialize-scss@1.97.1 ในไฟล์แพ็คเกจดาวตกของฉันเพื่อบังคับให้เป็นเวอร์ชันเก่า ตอนนี้ดรอปดาวน์ใช้งานได้ jquery เก่าและทั้งหมด!

เรียกโค้ด jquery css ที่เป็นรูปธรรมหลังจากที่ html แสดงผลแล้วเท่านั้น ดังนั้นคุณสามารถมีคอนโทรลเลอร์แล้วเริ่มบริการที่เรียกรหัส jquery ในคอนโทรลเลอร์ สิ่งนี้จะทำให้ปุ่มเลือกไม่เป็นไร หากคุณพยายามใช้ ngChange หรือ ngSubmit มันอาจไม่ได้ผลเนื่องจากรูปแบบไดนามิกของแท็กที่เลือก

สิ่งนี้ใช้ได้กับฉันเท่านั้น:

$(document).ready(function(){
    $('select').not('.disabled').formSelect();
});

ฉันพบว่าตัวเองอยู่ในสถานการณ์ที่เลือกใช้โซลูชัน

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

ไม่ว่าด้วยเหตุผลใดก็ตามที่ทำให้เกิดข้อผิดพลาดเนื่องจากไม่พบฟังก์ชัน material_select () เป็นไปไม่ได้ที่จะพูดว่า<select class="browser-default... เพราะฉันใช้เฟรมเวิร์กที่แสดงผลแบบฟอร์มอัตโนมัติ ดังนั้นวิธีแก้ปัญหาของฉันคือเพิ่มคลาสโดยใช้ js (Jquery)

<script>
 $(document).ready(function() {
   $('select').attr("class", "browser-default")
});

ขั้นแรกตรวจสอบให้แน่ใจว่าคุณเริ่มต้นในเอกสารแล้วเป็นเช่นนี้:

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

จากนั้นเติมข้อมูลของคุณในแบบที่คุณต้องการ ตัวอย่างของฉัน:

    function FillMySelect(myCustomData) {
       $("#mySelect").html('');

        $.each(myCustomData, function (key, value) {
           $("#mySelect").append("<option value='" + value.id+ "'>" + value.name + "</option>");
        });
}

ตรวจสอบให้แน่ใจว่าหลังจากที่คุณทำกับประชากรเสร็จแล้วเพื่อเรียกใช้เนื้อหานี้เปลี่ยนแปลงดังนี้:

$("#mySelect").trigger('contentChanged');

สำหรับเบราว์เซอร์เริ่มต้น

<head>
     select {
            display: inline !important;
         }
</head>

หรือโซลูชัน Jquery หลังจากลิงก์ t ไลบรารี Jquery และไฟล์โลคัล / CDN ของคุณทำให้เป็นจริง

<script>
(function($){
  $(function(){
    // Plugin initialization
    $('select').not('.disabled').formSelect();
  }); 
})(jQuery); // end of jQuery name space

ฉันชอบเฟรมเวิร์กนี้มาก แต่สิ่งที่จะแสดงบนโลก: ไม่มี ...

เพียงเพื่อติดตามสิ่งนี้เนื่องจากคำตอบด้านบนแนะนำให้ไม่ใช้ materializecss ... ในเวอร์ชันปัจจุบันของการทำให้เป็นจริงคุณไม่จำเป็นต้องเริ่มต้นการเลือกอีกต่อไป