Question

我有以下html：

<div class="sk-toolbar-tools-primary">
   <span class="sk-custom-select">
      <select name="music-sort-select" id="music-sort-select">
          <option value="option1">Company 1</option>
          <option value="option2">Company 2</option>
          <option value="option3">Company 3</option>
     </select>
  </span>
</div>

正如您所看到的，这个select元素是使用CSS样式设置的，现在如果我使用AJAX调用从数据库发布公司并使用此Javascript函数将响应注入select：

 function loadCompanies(){
    var companies= getCompanies();
    var select = document.getElementById("music-sort-select");
    for(var i = 0; i<companies.length; i++) {
        select.options[select.options.length] = new Option(companies[i].name,companies[i].id);
    }

}

其中getCompanies()正在进行AJAX调用，结果是Javascript函数工作正常，我可以看到使用chrome中的开发人员工具发布的数据来自DB，但是select停止工作并且它不会打开并显示选项。我想这是因为新的选项在页面加载后加载时没有采用CSS样式。我该如何解决这个问题？

Answer 1

即使在DOM中添加了新内容，浏览器也应立即应用CSS。您是否使用选择框替换脚本通过CSS使选择框可以设置样式？

Answer 2

可以使用Jquery来完成给你的样式，按钮ID

jQuery(function($) {
var $output = $('#output')
  , $style = $('#styles')
  , $button = $('#preview')
;
$ed.val($style.html());
$button.click(function() {
    $style.html($output.val());
    return false;
});
});

如何在javascript调用后重新加载样式？

2 个答案: