multibox plugin is not selecting the option-tags

[ChristianSchmidt1981]

I've a selectbox with option-tags.
Than I am selecting one entry with this plugin, but the correct option-tag don't get the property "selected". This is not connected.

I added this feature on this way

` multiSelect.subscribe(function(event) {
switch (event.action) {
case 'ADD_OPTION':
$(selectorString + " option[value='" + event.value + "']").prop('selected', 'selected');
break;

            case 'REMOVE_OPTION':
                $(selectorString + " option[value='" + event.value + "']").prop('selected', '');
                break;
        }
    });`

[laurentiudascalu]

For those who use vanilla javascript, I edited @ChristianSchmidt1981 code:

`function setSelectBoxByText(eid, etxt, sel = true) {
var eid = document.getElementById(eid);
for (var i = 0; i < eid.options.length; ++i) {
if (eid.options[i].text == etxt){
console.log('da');
eid.options[i].selected = sel;
}
}
}

multiSelect.subscribe(function(event) {
switch (event.action) {
case 'ADD_OPTION':
setSelectBoxByText('selectServiciu',event.value);
break;

    case 'REMOVE_OPTION':
		setSelectBoxByText('selectServiciu',event.value,false);
    break;
}

});`

[thinkmobilede]

            $(selectorString + " option[value='" + event.value + "']").prop('selected', '');

I had to use attr('selected', 'selected') and removeAttr('selected') as the other way did not work

[netsensei]

Okay. I'm confronted with the same issue. select becomes hidden via a display:none but it doesn't represent the state of the element I/O happens. When submitting a form, the default state of the select is send with a HTTP POST request. Not the updated state after adding/removing elements.

Here's how I wired in the missing pieces with vanilla javascript:

const foobar = new IconicMultiSelect({
    select: "#foobar",
});

foobar.subscribe(function (evt) {
    switch (evt.action) {
      case 'ADD_OPTION':
        for (i = 0; i < foobar._selectContainer.options.length; i++) {
          if (foobar._selectContainer.options[i].value == evt.value) {
            foobar._selectContainer.options[i].selected = true
            foobar._selectContainer.options[i].setAttribute("selected", "")
          }
        }
        break;
      case 'REMOVE_OPTION':
        for (i = 0; i < foobar._selectContainer.options.length; i++) {
          if (foobar._selectContainer.options[i].value == evt.value) {
            foobar._selectContainer.options[i].selected = false
            foobar._selectContainer.options[i].removeAttribute("selected", "")
          }
        }
        break;
    }
})

foobar.init();

[thinkmobilede]

I think in your ADD_OPTION case you have setAttribute("selected", "") which should be setAttribute("selected", "selected") but further you have to access the "real" select field by its ID or another Selector and not by the reference to IconicMultiSelect, so like with document.getElementById('some-id').options

[Edwinroman30]

Okay. I'm confronted with the same issue. select becomes hidden via a display:none but it doesn't represent the state of the element I/O happens. When submitting a form, the default state of the select is send with a HTTP POST request. Not the updated state after adding/removing elements....

Hi, regarding your solution, I extended it a little bit cause the same happens when we want to remove all items. In the visual percept it is fine, it removes all the elements (visually) but when performing the HTTP POST the state is not present in the request. Keeping the same idea, I just added the following line of code:

const foobar = new IconicMultiSelect({
    select: "#foobar",
});

foobar.subscribe(function (evt) {
    switch (evt.action) {
      case 'ADD_OPTION':
        for (i = 0; i < foobar._selectContainer.options.length; i++) {
          if (foobar._selectContainer.options[i].value == evt.value) {
            foobar._selectContainer.options[i].selected = true
            foobar._selectContainer.options[i].setAttribute("selected", "")
          }
        }
        break;
      case 'REMOVE_OPTION':
        for (i = 0; i < foobar._selectContainer.options.length; i++) {
          if (foobar._selectContainer.options[i].value == evt.value) {
            foobar._selectContainer.options[i].selected = false
            foobar._selectContainer.options[i].removeAttribute("selected", "")
          }
        }
        break;
      case 'CLEAR_ALL_OPTIONS':
           for (i = 0; i < foobar._selectContainer.options.length; i++) {
               foobar._selectContainer.options[i].selected = false;
               foobar._selectContainer.options[i].removeAttribute("selected", "");
            }
           break;
       }
});

foobar.init();

In summary, it makes the remove or discard all bottom work as expected.