Asmselect и изменение выбранного статуса опции с помощью Javascript

Я пытаюсь сделать довольно простую задачу в asmselect без удачи.

У меня есть список множественного выбора, используя asmselect. Ни один из вариантов не выбран изначально.

<select multiple="multiple" id="myselectdiv" name="myselectdiv[]" title="choose">
<option value="0">zero</option>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>

Asmselect инициализирован правильно, и я могу наблюдать, как элементы отображаются ниже, когда я выбираю их вручную.

Я хочу использовать Javascript или jQuery, чтобы динамически изменять выбранный статус одного из параметров на "выбранный", не нажимая этот параметр. Это действительно просто:

document.getElementById('myselectdiv').options[3].selected=true;

Когда я пытаюсь сделать это в списке множественного выбора с инициализацией asmselect, ничего не происходит. Я хочу, чтобы JavaScript выбрал элемент и отобразил его ниже, как это происходит при ручном нажатии на него с помощью asmselect.

Та же проблема на Safari 5 и Firefox 21, MacOS. Любая помощь приветствуется.

1 ответ

После некоторых экспериментов я смог решить проблему. Я выкладываю решение на случай, если у кого-то возникнет такая же проблема.

Документация описывает инициализацию asmSelect во время загрузки документа, например:

$(document).ready(function() {
   $("select[multiple]").asmSelect({
   addItemTarget: 'bottom',
   animate: true,
   highlight: true,
   sortable: true
   });          
}); 

Но если вы планируете динамически заполнять и / или изменять выбранные элементы с помощью javascript, после загрузки страницы asmSelect необходимо не инициализировать при внесении изменений, а затем повторно инициализировать. Например:

function something() {
   [do some ajax]

   // remove the asmSelect attachment to the select list
   $(".asmSelect").remove(); $(".asmList").remove();

   //change some selections in the list with Javascript
   document.getElementById('myselectlist').options[3].selected=true;

   // re-initialize asmSelect
   $(document).ready(function() {
     $("select[multiple]").asmSelect({
     addItemTarget: 'bottom',
     animate: true,
     highlight: true,
     sortable: true
     });            
   }); 
}

В целом я очень доволен asmSelect и надеюсь, что этот пост будет полезен для других, внедряющих инструмент.

Другие вопросы по тегам