php结合html，动态填充下拉框

html

<tr>
                    <td class="pro_ltd"><font class="red">*</font>&nbsp;选择产品：</td>
                    <td colspan="2"><{input type="text" vtype="required" "updateList();" "updateList();" "checkBu(this);" onChange="selectDoc(goods_id)" list="bu" id="buinput" autocomplete="off" maxlength="1000" style="width:20%" value=$goods_name}>
                        <input type="hidden" list="buid" id="buid" name="apply[goods_id]" value=<{$apply.goods_id}>></td>
                    <datalist id="bu"></datalist>
                    <ul id="bu-data" style="display:none;">
                        <{foreach from=$goods_list item="applys"}>
                            <li><{$applys.name}></li>
                            <input value="<{$applys.goods_id}>" type="hidden">
                        <{/foreach}>
                    </ul>
                </tr>

js

if (sign) {
        $("buinput").disabled = true;
    }
    function checkBu(input){
        //如果输入符合要求，正常，否则清空
        if (!options.get('text').contains(input.value) && input.value != '') {
            input.value='';
            Message.error('此产品不存在');
        }
    }
    var options = $('bu-data').getChildren('li');
    var optionsid = $('bu-data').getChildren('input');
    function updateList(){
        var input = $('buinput');
        var temp = '';
        var j = 0;
        for (i = 0;i < options.length; i++) {
            if ((input.value == '' || options[i].get('text').test(input.value)) && j<10) {
                temp = temp + '<option>' + options[i].get('text') + '</option>';
                tempid = optionsid[i].value;
                j++;
                if(input.value == options[i].get('text'))
                {
                    $('buid').value = tempid;
                    goods_id = tempid;
                    goods_name = options[i].get('text');
                }
            }
        }
        console.log($('buid').value);
        $('bu').set('html', temp);
    }