首页 > 解决方案 > 使用 Selectize 时“未定义选项”

问题描述

我试图让一些选项在使用选择多选时以选中状态开始。我正在使用 PHP 从数据库中提取一些信息,然后将信息转换为 JS 数组。当我尝试“初始化 Selectize 控件”时,我收到一条错误消息ReferenceError: options is not defined。如何将项目添加到我的多选?

      <?
            //Query
            $courseQuery = $page->dbf->query("SELECT * FROM courses");
            $curCourses = $page->dbf->query("SELECT * FROM recipesToCourse WHERE recipeId = '$recID'");

            $course = [];
            while($crs = $courseQuery->fetch_object()) {
                $course[$crs->id] = $crs->title; 
            }
            $jsCourse = json_encode($course);

            $crsList = [];
            while($cr = $curCourses->fetch_object()) {
                $crsList[] = $cr->courseId;
            }
            $jsCrsList = json_encode($crsList);

    ?>
    <script>
        //Enable multiselect
        $('#course').selectize({
            maxItems: 10
        });
     </script>
     <select id="course" name="course[]" multiple>
         <option value="">-- Select Courses --</option>
<?                  
         foreach($course as $key=>$value) {
?>                  
             <option value="<?=$key?>"><?=$value?></option>
<?
         }
?>
      </select>
       <script>
            var courses = '<?echo $jsCourse?>';
            courses = JSON.parse(courses);

            var crsList = '<?echo $jsCrsList?>';
            crsList = JSON.parse(crsList);

            // initialize the Selectize control !!My ERROR!!
            var $select = $('#course').selectize(options);

            // fetch the instance
            var selectize = $select[0].selectize;

            index = 0;
            var select = document.getElementById('course');
            for(var i = 1; i < Object.keys(courses).length + 1; i++) {
                console.log('checking...');
                if(crsList[index] == i) {
                    console.log('adding');

                    selectize.addItem(courses[i]);

                    index++;
                }
            }
    </script>

标签: javascriptphpjqueryhtmlselectize.js

解决方案


推荐阅读