Question

我正在尝试使用ajax向selectbox添加选项。我正在使用selectize.js。如果我不使用selectize.js，一切都运行正常。当一个选项更新时，两个选择框都被链接其他选择框值使用ajax更新（希望你明白了）。我的HTML＆amp; javascript ajax代码是：

<label class="uk-form-label" for="wizard_device_catagory">Device Catagory*</label>
<select id="wizard_device_catagory" name="devicetype" onchange="showmanuf(this.value);getproblems(this.value,idpriority.value);" required>
    <option value="">Select category</option>
    <option value="mobile">Mobile</option>
    <option value="tablet">Tablet</option>
    <option value="laptop">Laptop</option>
    <option value="pc">PC</option>
    <option value="printer">Printer</option>
    <option value="ups">UPS</option>
</select>
<div class="parsley-row">
    <label class="uk-form-label" for="manufacturerdrop">Manufacturer*</label> 
    <select id="manufacturerdrop" name="manufacturer" onchange="getmodel(this.value,devicetype.value);">
        <option value="">Select Manufacturer</option>
    </select>
</div>

function showmanuf(first){  
    var xmlhttp;

    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange=function()
    {         
         if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("manufacturerdrop").innerHTML = xmlhttp.responseText;       
        }
    }

    xmlhttp.open("GET","php/getmanufacturer.php?first="+first,true);
    xmlhttp.send();
};

我从未使用过selectize.js，但我想使用selectize.js。请帮助。

Answer 1

应使用addOption()函数添加选项，而不是直接使用HTML操作注入。添加选项后，必须调用refreshOptions()函数来更新UI。

您还可以使用addOption()配置选项代替options，该选项需要将一组值注入<option>标记。在这种情况下，您还需要设置dataAttr和valueField配置选项。

这完全根据他们的API文档：https://github.com/selectize/selectize.js/blob/master/docs/api.md

使用ajax选择选项以选择selectize.js

1 个答案: