为什么我的下拉选项在源代码中的 Ajax 调用后更新但在 UI 中没有更新？

Question

我有一些我想要的 django 下拉按钮最初是空的，但我有一个脚本被调用来获取下拉选项。我看到选项填充在源代码中，但是当我单击下拉菜单时它们实际上并没有出现在 UI 中。我的 Ajax 调用写错了吗？

html:

    <div>
      <table>
        <tr>
          <td>
              <!-- adding dropdown selector for cryptocurrency symbol (type) -->
              <div id="symbol_selection" class="input-field col s12">
                <select id="selected_symbol">
                  <option value="" disabled selected>Choose your CryptoCurrency</option>

                </select>
              </div>
          </td>
          <td>
              <!-- adding dropdown selector for cryptocurrency market (physical currency type) -->
              <div id="market_selection" class="input-field col s12">
                <select id="selected_market">
                  <option value="" disabled selected>Choose your Market</option>
                </select>
              </div>
          </td>
          <td>
              <!-- adding function test button -->
            <a class="waves-effect waves-light btn" id="test_btn" onclick="test_fxn()">Run Test</a>
          </td>
        </tr>
      </table>

    </div>

My Ajax Call:

$(document).ready(function() {

  $.ajax({
    method: 'GET',
    url: "dropdowns",
    data: {
      "gettem": "gettem"
    },
    success: function(data) {
      var op_items = data.symbols;
      var markets = data.markets;

      for (var i = 0; i < op_items.length; i++) {
        console.log(op_items[i])
        option = "<option value=" + op_items[i] + ">" + op_items[i].toString() + "</option>";
        $("#symbol_selection select").append(option);
      }
      for (var i = 0; i < markets.length; i++) {
        console.log(markets[i])
        option = "<option value=" + markets[i] + ">" + markets[i] + "</option>";
        $("#market_selection select").append(option);
      }

    },

  });
});
</script>

蓝色区域代表第一个下拉菜单，红色区域代表第二个。数据的输出（在 Ajax 调用中）打印在控制台日志中，并且可以在右上角的源代码查看器中看到，匹配返回的 Ajax 选项。

Answer 1

我不知道其他人是否会遇到这个问题，但在搜索了一段时间后，我确实找到了解决方案。我的下拉列表是一个物化（下拉）选择器，但它需要一个脚本来初始化。他们的文档中不是很清楚，但您还必须包含一个“OnChange”方法。

页面上的语法与最新版本不太匹配，但在玩弄之后我得到了它。

   <script type="text/javascript">
      //~Method below is needed to initialize the materialize selection dropdown
      $(document).ready(function(){
          $('select').formSelect();
      });
      //~Method below is needed to add the update feature when dynamically adding options
      //~This must be triggered after the changes occur in the ajax call.
      $('SELECT').on('contentChanged', function() {
          $(this).formSelect();
      });
    </script>

另一个细微的差别 (-_-)，你也必须触发它。我假设，即使在找到它之后，更改意味着它是任何更改的侦听器，但您必须在 Ajax 调用中实际包含比。

$.ajax({
              method: 'GET',
              url: "django_url_to_your_script",
              data:{"test":"test"},
              success:function(data){
                var op_items = data.symbols;
                var markets = data.markets;


                for(var i = 0 ; i < op_items.length; i++){
                  option = "<option value="+ op_items[i]+">"+ op_items[i].toString() +"</option>";
                  $("#symbol_selection select").append(option);
                }
                for(var i = 0 ; i < markets.length; i++){
                  option = "<option value="+ markets[i] + ">"+ markets[i] +"</option>";
                  $("#market_selection select").append(option);
                }
                  //THIS IS THE KEY! AFTER ALL YOU ADDITIONS HAVE BEEN MADE
                  //FORCE THE ONCHANGE TRIGGER TO OCCUR.
                  $("#market_selection select").trigger('contentChanged');
                  $("#symbol_selection select").trigger('contentChanged');

              },

            });

现在我得到了添加的下拉列表：