在ajax调用（Bootstrap Selectpicker）之后使用html（）插入选项后选择不起作用答案

【问题标题】：Select does not work after inserting options with html() after ajax call (Bootstrap Selectpicker)在ajax调用（Bootstrap Selectpicker）之后使用html（）插入选项后选择不起作用
【发布时间】：2016-03-31 20:51:31
【问题描述】：

这是选择：

<select class="selectpicker" id="item-fornecedores-1" multiple data-placeholder="Selecione os fornecedores para este item"></select>

这是我插入的数据：

<optgroup label="São José do Rio Preto"><option>TORQUEMIX </option></optgroup><optgroup label="Sorocaba"><option>A.M.DIB INDUSTRIA E COMERCIO</option></optgroup><optgroup label="Salto de Pirapora"><option>CONTA DE TESTE DE ÓRGãO PúBLICO</option></optgroup>

生成者：

    $response = "";
    foreach ($filtro as $key => $value) {
        $nomeCidade = getResults("SELECT nome FROM tbl_cidades WHERE id = '".$key."'")[0]["nome"];
        if (strpos($response, $nomeCidade) === false) {
            $response .= '<optgroup label="'.$nomeCidade.'">';
        }
        for ($i = 0; $i < count($value); $i++) {
            $nomeFornecedor = getResults("SELECT nome_fantasia FROM tbl_fornecedors WHERE id = '".$value[$i]."'")[0]["nome_fantasia"];
            $response .= '<option>'.$nomeFornecedor.'</option>';
        }
        $response .= '</optgroup>';
    }

这里是选择成功更新的地方：

                $.ajax({
                    url: hostGlobal+"site/estrutura/ajax.php",
                    type: "POST",
                    dataType: "TEXT",
                    data: {
                        action: "filtrarFornecedores",
                        prefeitura_id: <?=$_SESSION["id"]?>,
                        tipo_negocio: 1,
                        segmentos: $("#pedido-segmento").val(),
                        estados: $("#pedido-fornecedor-estado").val(),
                        index: (i+1).toString()
                    },
                    success:function(result, textStatus, jqXHR) {
                        console.log(JSON.parse(result)[1]);
                        $("#item-fornecedores-" + JSON.parse(result)[0]).html(JSON.parse(result)[1]);
                        $("#item-fornecedores-" + JSON.parse(result)[0]).show();
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                    //  console.log(errorThrown);
                    }
                });

选择元素已更新，但发生的情况如下：

如果我之后不使用 show()，我根本看不到任何数据（而且 HTML 完全有效，因为当我直接在 HTML 文档上使用它时，同样的结果也有效）。

我正在使用bootstrap-select。为什么我不能在不搞砸整个元素的情况下“实时”更新/“加载”这些选项？

编辑：

我刚刚意识到，当我从选择标签中删除“多个”时，它可以完美运行。不过，我真的需要使用多个。

【问题讨论】：

标签： javascript jquery html ajax twitter-bootstrap

【解决方案1】：

修改数据后必须调用refresh方法才能生效。

要使用 JavaScript 以编程方式更新选择，首先要操作选择，然后使用刷新方法更新 UI 以匹配新状态。这在删除或添加选项时是必要的，或者当通过 JavaScript 禁用/启用选择。

$("#item-fornecedores-" + JSON.parse(result)[0]).selectpicker('refresh');

当您调用show() 时，您将强制底层选择元素可见。选择实际上被小部件生成的元素替换。

【讨论】：