如何使用Eric Hynds的jQuery UI MultiSelect小工具设置下拉列表初始化过程中选择的默认选项？

Question

如何设置下拉列表初始化过程中选择的默认选项而不是HTML？我正在从数据库中提取选定的值/选项，并希望每次打开下拉列表进行更改时都将其选中。我正在使用Eric Hynds的jQuery UI MultiSelect小部件。

var PreSelectedValuesDatabase = “Material in alternative formats (e.g., large print, Braille, e-text):Periodic, Accessible building access (e.g., keyless entry, accessible parking):Periodic, Ergonomics Assessment:Permanent”;
$("#GroupDropDown").multiselect(
            {                   
                height:500, 
                minWidth:500,
                selectedList:false, 
                open: function(event, ui){
                        console.log(event);
                },
                close: function(event, ui){
                           var values = $(this).val();                             
                    }                   
            });             

​

		<select id='GroupDropDown' name="example-optgroup" multiple="multiple" size="1">
			<optgroup label="Material in alternative formats (e.g., large print, Braille, e-text)">
				<option value="Material in alternative formats (e.g., large print, Braille, e-text):Permanent">Permanent</option>
				<option value="Material in alternative formats (e.g., large print, Braille, e-text):Periodic">Periodic</option>
				<option value="Material in alternative formats (e.g., large print, Braille, e-text):Temporary">Temporary</option>
				<option value="Material in alternative formats (e.g., large print, Braille, e-text):Unknown">Unknown</option>
			</optgroup>
		
			<optgroup label="Accessible building access (e.g., keyless entry, accessible parking)">
				<option value="Accessible building access (e.g., keyless entry, accessible parking):Permanent">Permanent</option>
				<option value="Accessible building access (e.g., keyless entry, accessible parking):Periodic">Periodic</option>
				<option value="Accessible building access (e.g., keyless entry, accessible parking):Temporary">Temporary</option>
				<option value="Accessible building access (e.g., keyless entry, accessible parking):Unknown">Unknown</option>
			</optgroup>
			
			<optgroup label="Ergonomics Assessment">
				<option value="Ergonomics Assessment:Permanent">Permanent</option>
				<option value="Ergonomics Assessment:Periodic">Periodic</option>
				<option value="Ergonomics Assessment:Temporary">Temporary</option>
				<option value="Ergonomics Assessment:Unknown">Unknown</option>
			</optgroup>
		</select>	

​

Answer 1

尝尝这个。

$('#GroupDropDown').on('change',function(e){
  var id = e.target.value;
  if(id == PreSelectedValuesDatabase){
      $('#GroupDropDown 
     option[value="'+PreSelectedValuesDatabase+'"]').attr('selected', 'selected');
  }
})