在jQuery中刷新下拉选择而不刷新页面答案

【问题标题】：Refresh dropdown selection without page refresh in jQuery在jQuery中刷新下拉选择而不刷新页面
【发布时间】：2017-11-19 12:00:13
【问题描述】：

听起来很简单。

我有这个在页面加载时运行的函数：

 function initializeSelect($select, uri, adapt){        
   $.getJSON( uri, function( data ) {
   $select.empty().append($('<option>'));       
   $.each(data, function(index, item) {
     var model = adapt(item);
     var $option = $('<option>');
     $option.get(0).selected = model.selected;
     $option.attr('value', model.value)
       .text(model.text)
       .appendTo($select);      
     });
   });
 });

这里调用它并为下拉选择生成 OPTIONS：

 initializeSelect($('#commoditySelect'), 'api/sel_keyCommodities.php', function (item) { 
   return {
     value: item.KEY_COMMODITY,
     text: item.KEY_COMMODITY
   }
 });

当模式窗口关闭时，我需要能够在不刷新页面的情况下刷新下拉选择：

 $('#messageModal').on('hidden.bs.modal', function()
 {
    // I tried this to no avail
    initializeSelect();       
 });

这样，下拉选择将重新运行，可能会添加一个可能已添加或未添加的新选择。

这可以做到吗？如果可以，怎么做？

【问题讨论】：

您没有在 $('messageModal') 代码块中将任何参数传递给 InitializeSelect() 函数。是不是打错字了？

标签： javascript jquery

【解决方案1】：

您可以将uri 和adapt 的值存储在<select> 和data(...) 中，并在不带参数（或至少不带uri 和adapt）调用initializeSelect 时使用这些值

function initializeSelect($select, uri, adapt) {
  if (typeof uri !== "string") {
    uri = select.data("uri");
    adapt = select.data("adapt");
  } else {
    select.data({
      "uri": uri,
      "adapt": adapt
    });
  }

  $.getJSON(uri, function(data) {
    $select.empty().append("<option>");

    $.each(data, function(index, item) {
      var model = adapt(item);

      $("<option>")
        .val(model.value)
        .text(model.text)
        .prop("selected", model.selected)
        .appendTo($select);
    });
  });
}

要“刷新”<select>，您必须调用 initializeSelect() 并传递所需的 <select>

initializeSelect($("commoditySelect"));

example on jsfiddle

【讨论】：