te')); return $arr; } /* 遍历用户所有主题 * @param $uid 用户ID * @param int $page 页数 * @param int $pagesize 每页记录条数 * @param bool $desc 排序方式 TRUE降序 FALSE升序 * @param string $key 返回的数组用那一列的值作为 key * @param array $col 查询哪些列 */ function thread_tid_find_by_uid($uid, $page = 1, $pagesize = 1000, $desc = TRUE, $key = 'tid', $col = array()) { if (empty($uid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('uid' => $uid), array('tid' => $orderby), $page, $pagesize, $key, $col); return $arr; } // 遍历栏目下tid 支持数组 $fid = array(1,2,3) function thread_tid_find_by_fid($fid, $page = 1, $pagesize = 1000, $desc = TRUE) { if (empty($fid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('fid' => $fid), array('tid' => $orderby), $page, $pagesize, 'tid', array('tid', 'verify_date')); return $arr; } function thread_tid_delete($tid) { if (empty($tid)) return FALSE; $r = thread_tid__delete(array('tid' => $tid)); return $r; } function thread_tid_count() { $n = thread_tid__count(); return $n; } // 统计用户主题数 大数量下严谨使用非主键统计 function thread_uid_count($uid) { $n = thread_tid__count(array('uid' => $uid)); return $n; } // 统计栏目主题数 大数量下严谨使用非主键统计 function thread_fid_count($fid) { $n = thread_tid__count(array('fid' => $fid)); return $n; } ?>javascript - Materialize select not working append option with - Stack Overflow

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

    最新消息：雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客
    你的位置： 首页>programmer>javascript - Materialize select not working append option with - Stack Overflow

    javascript - Materialize select not working append option with - Stack Overflow

    programmeradmin3浏览0评论

    I use materialize css for my project, i have problem when i want to append option in matrialize select with ajax. I've following this answer How to dynamically modify <select> in materialize css framework. but not working.

    in my html i use materialize modal for render materialize form. this my code :

                       <div class="input-field col s12">                            
                        <select id="select_1" name="select_1">
                            <option value="1">option 1</option>
                            <option value="2">option 2Barat</option>     
                        </select>
                      <label for="select_1">Select 1</label>
                    </div>

                     <div class="input-field col s12">                          
                        <select id="select_2"  name="select_2">
                            <option value="0" disabled="disabled">Choose option</option>
                        </select>
                      <label for="select_2">Select 2</label>
                    </div>

    my js 

    <script type="text/javascript">
    $(document).ready(function(){
        function get_selected(){
            var base_url = '<?php echo base_url() ?>';
            var data = $('#select_1').val();
            $.ajax({
                url: ""+base_url+"admin/get_data/",
                dataType: 'json',
                type: "POST",
                data:{'data':data},
                beforeSend: function() {

                },                  
                success: function (data) {
                    var text = '';
                    var $selectDropdown = $("#select_1").empty().html(' ');

                    $.each(data, function(i, val){                      
                        $selectDropdown.append($("<option></option>").attr("value",val.id).text(val.name));

                    })

                    $selectDropdown.trigger('contentChanged');
                    $('select').on('contentChanged', function() {
                      // re-initialize (update)
                      $(this).material_select();
                    });
                },
                error: function (xhr, status, err) {
                    // console.log(xhr);
                    // console.log(status);
                    // console.log(err);
                },
            });
        }


        $(document).on('change','#select_1', function(){
            get_selected();         
        })
    })
</script>

    note : i using jquery 3.3.1 and materialize version 0.100.2. thank you for your help, sorry for my english :)

    I use materialize css for my project, i have problem when i want to append option in matrialize select with ajax. I've following this answer How to dynamically modify <select> in materialize css framework. but not working.

    in my html i use materialize modal for render materialize form. this my code :

                       <div class="input-field col s12">                            
                        <select id="select_1" name="select_1">
                            <option value="1">option 1</option>
                            <option value="2">option 2Barat</option>     
                        </select>
                      <label for="select_1">Select 1</label>
                    </div>

                     <div class="input-field col s12">                          
                        <select id="select_2"  name="select_2">
                            <option value="0" disabled="disabled">Choose option</option>
                        </select>
                      <label for="select_2">Select 2</label>
                    </div>

    my js 

    <script type="text/javascript">
    $(document).ready(function(){
        function get_selected(){
            var base_url = '<?php echo base_url() ?>';
            var data = $('#select_1').val();
            $.ajax({
                url: ""+base_url+"admin/get_data/",
                dataType: 'json',
                type: "POST",
                data:{'data':data},
                beforeSend: function() {

                },                  
                success: function (data) {
                    var text = '';
                    var $selectDropdown = $("#select_1").empty().html(' ');

                    $.each(data, function(i, val){                      
                        $selectDropdown.append($("<option></option>").attr("value",val.id).text(val.name));

                    })

                    $selectDropdown.trigger('contentChanged');
                    $('select').on('contentChanged', function() {
                      // re-initialize (update)
                      $(this).material_select();
                    });
                },
                error: function (xhr, status, err) {
                    // console.log(xhr);
                    // console.log(status);
                    // console.log(err);
                },
            });
        }


        $(document).on('change','#select_1', function(){
            get_selected();         
        })
    })
</script>

    note : i using jquery 3.3.1 and materialize version 0.100.2. thank you for your help, sorry for my english :)

    • javascript
    • jquery
    • html
    • css
    • materialize
    Share Improve this question asked Feb 13, 2018 at 8:28 Oka NuantaraOka Nuantara 431 silver badge4 bronze badges
    Add a ment  | 

    2 Answers 2

    Reset to default 8 

     $(document).ready(function() {
    $('select').material_select();
 });
 
 $(document).on('change','#select_1', function(){
     get_selected();         
})


function get_selected(){
     var data=[{id:1,name:"ABC"},{id:2,name:"XYZ"},{id:3,name:"PQR"}];
     
     var Options="";
    $.each(data, function(i, val){ 
      Options=Options+"<option value='"+val.id+"'>"+val.name+"</option>";
  });
  $('#select_2').empty();
  $('#select_2').append(Options);
  $("#select_2").material_select()
} 
    <script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>


  <link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/materialize/0.100.2/css/materialize.min.css">


  <script src="https://cdnjs.cloudflare./ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
    
<div class="row">    
<div class="input-field col s12">                            
<select id="select_1" name="select_1">
<option value="1">option 1</option>
<option value="2">option 2Barat</option>     
</select>
<label for="select_1">Select 1</label>
</div>
                    
<div class="input-field col s12">                          
<select id="select_2"  name="select_2">
<option value="0" disabled="disabled">Choose option</option>
</select>
<label for="select_2">Select 2</label>
</div>
</div>

    For anyone ing here after 2019, please note that, the API has changed and material_Select() no longer works. Use,

        $('#my_Element').append(<Array of options>)
    $('#my_Element').formSelect()

    与本文相关的文章

    发布评论

    评论列表(0)

    1. 暂无评论