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

时间:2018-05-25 15:08:31

标签: jquery

如何在下拉列表初始化期间设置默认选项而不是HTML?我从数据库中提取选定的值/选项,并希望每次打开下拉列表进行更改时都选中它们。我正在使用Eric Hynds的jQuery UI MultiSelect Widget。

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>	
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

试试这个。

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