javascript - 如何使用 multiselect() 而不删除现有值并根据另一个选择添加新值

Question

我正在参与一个电子学习项目，并致力于大规模预科类(class)部分。我使用搜索框查找学生的姓名，并将这些值添加到列表中。当我尝试查找其他学生的姓名并将这些值添加到现有列表中时，就会出现问题。这部分会重新加载，所有以前的值都会消失。如何显示新值的结果并将其添加到所选列表而不删除旧值。

显示列表的代码(detail.php)

                <p>
                    <label>&nbsp;<?php echo $string['LBL_PROGRAM_NAME']; ?>: </label>
                    <input type="text" id="program_name" name="program_name"  class="tam1" maxlength="200"  value="<?php echo $program_name; ?>" />
                </p>
                <br class="clear"/>
                <center>
                    <input type="button" class="btn" name="buscar_programs" value="<?php echo $string['LBL_SEARCH_PROGRAMS']; ?>" onclick="javascript:loadPrograms();"/>
                </center>                       
                <p>
                    <label><b><?php echo $string['LBL_PROGRAMS_SELECT']; ?>: <span class="rojo">*</span></b></label>
                    <span id="area_programs">
                    <select id="programs" class="multiselect" multiple="multiple" name="programs[]">
                    </select>
                    </span>
                </p>

函数loadPrograms() (detail.php):

function loadPrograms(){
     $.ajax({  
          url: ruta_fichero_ajax+"loadProgramsItinerario.php?a1="+$('#program_name').val()+"&a2="+$('#center_id').val(),  
          dataType: 'json',  
          async: false,  
          success: function(datos){

                var strHTML = '<select id="programs" name="programs[]" class="multiselect" multiple="multiple">';
                if (datos.length>0){
                    $.each(datos, function(index, dato) {
                        strHTML += '<option value="' + dato.id + '">' + dato.name + '</option>';
                    });
                }                       
                strHTML += '</select>'; 
                document.getElementById("area_programs").innerHTML =  strHTML;

                $("#programs").multiselect();

           }  
        });     
}   

我是一名大三学生，Javascript 还有很多东西需要学习。感谢您的帮助。

Answer 1

要将新值附加到选项列表，您可以使用下面的代码(使用 jQuery，因为您似乎正在使用 jQuery)

$("#programs").append(new Option('TEXT', 'VALUE'));

或者使用普通 JS

selectElement = document.getElementById('programs');
selectElement.options[selectElement.options.length] = new Option('TEXT', 'VALUE');

或者您可以检查 this或w3schools详细解释。