Question

我想根据用户选择的日期更新选择选项。为此，我尝试使用ajax请求来获取数据，并将接收到的数据作为选项附加到select元素。当我尝试将数据记录到控制台时收到的json对象没有任何问题，它提供了数据。但是，我试图将它附加到选择元素，选项不会被附加。

JavaScript代码

    $.ajax({
                type: 'GET',
                url: 'sessions',
                data: { date: date },
                success: function (data) {
                    var sessions = data['sessions'];
                    console.log(sessions);
                    $('select').html('');
                    $.each(sessions, function (i, session) {                            
                        $('select').append($('<option/>', { 
                            value: session[0],
                            text : session[1]
                        }));
                        console.log(i);
                        console.log(session[1]);
                    });
                   }
                });

html代码

    <div class="row">
 <div id="sessionDiv" class="input-field"  style="padding:10px">
    <select class="black-text text-lighten-1" name="session" id="session" >
        <option  value="0" disabled selected>Choose your preferred session</option>
    </select>
    <label for="session" class="purple-text text-lighten-2"> Session :</label>
</div>

Answer 1

＆＃13;

function f1(){    $.ajax({
                type: 'GET',
                url: 'sessions',
                data: { date: date },
                success: function (data) {
                    var sessions = data['sessions'];
                    console.log(sessions);
                    $('select').html('');
                    $.each(sessions, function (i, session) {                            
                        $('select').append($('<option/>', { 
                            value: session[0],
                            text : session[1]
                        }));
                        console.log(i);
                        console.log(session[1]);
                    });
                  
                  
                  
                   }
                });
}

var data ={
  "sessions" : [{"value":"value 1","text":"Option 1"},
                {"value":"value 2","text":"Option 2"},
                {"value":"value 3","text":"Option 3"},
                {"value":"value 4","text":"Option 4"},
                {"value":"value 5","text":"Option 5"}]
}


function fillSelect(){
  
  var sessionList=data.sessions;
  $('#session12').empty();
  var msg='';
  console.log(sessionList.length);
  for(i=0;i<sessionList.length;i++){
    var bean=sessionList[i];
    msg+='<option value="'+bean.value+'">'+bean.text+'</option>';
  }              
  $('#session12').html(msg);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div id="sessionDiv" class="input-field"  style="padding:10px">
    <select class="black-text text-lighten-1" name="session" id="session12" >
        <option  value="0" disabled selected>Choose your preferred session</option>
    </select>
    <button type="button" onclick="fillSelect()"> click to fill</button>
    <label for="session" class="purple-text text-lighten-2"> Session :</label>
  </div>                                       
</div>

＆＃13;

如果你在data获得的异步请求的响应与我在片段中的数据变量中所写的相似，那么我生成option的方式就可以了。如果您获得的响应与我在数据中显示的完全相同（我的意思是变量的结构），那么您只需将ajax函数中的所有代码替换为fillSelect函数中的代码< / p>

Answer 2

从class="purple-text text-lighten-2"开始，我假设您正在使用materialeCSS框架。

如果您使用的是materializeCSS框架，请确保在添加新选项后再次初始化选择。

选择元素的附加选项不起作用 - MaterialiseCSS

2 个答案: