javascript - 在 ajax 调用后使用 html() 插入选项后选择不起作用(Bootstrap Selectpicker)

Question

这是选择:

<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);
                    }
                });

select 元素得到更新，但这是发生了什么:

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

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

编辑:

当我从 select 标签中删除“multiple”时，我才意识到它工作得很好。不过，我真的需要使用多个。

Answer 1

您必须调用 refresh修改数据使其工作后的方法。

To programmatically update a select with JavaScript, first manipulate the select, then use the refresh method to update the UI to match the new state. This is necessary when removing or adding options, or when disabling/enabling a select via JavaScript.

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

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