时间戳

首页 > 解决方案 > 如何使用 Eric Hynds 的 jQuery UI MultiSelect Widget 在下拉初始化期间而不是在 HTML 中设置默认选项？

jquery - 如何使用 Eric Hynds 的 jQuery UI MultiSelect Widget 在下拉初始化期间而不是在 HTML 中设置默认选项？

问题描述

如何设置在下拉初始化期间选择的默认选项，而不是在 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>

标签： jquery

解决方案

尝试这个。

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

推荐阅读