Manipulating asmSelect with JavaScript (solved)

[Niku]

I'm trying to manipulate selections for asmSelect allowing multiple selections with js.

The code is basically like this:

$('#mySelect').change(function(){
  var asmSelect = $('#Inputfield_asmselectfield');
  
  asmSelect.children("option").attrRemove('selected');
  
  if ($(this).val() == 1) {
    asmSelect.children('option[value="foo"]').attr('selected', true);
  }
  
  if ($(this).val() == 2) {
    asmSelect.children('option[value="bar"]').attr('selected', true);
  }
  
  asmSelect.change();
});

#mySelect is a InputfieldSelect, #Inputfield_asmselectfield is the asmSelect field.

This works for first time an option is selected in asmSelect, but second round fails.

1. Select 1 from #mySelect
2. "Foo" shows up as selected
3. Select 2 from #mySelect
4. "Foo" goes away, "Bar" shows up
5. Select 1 from #mySelect
6. "Bar" goes away. "Foo" does NOT show up.

Any ideas how to get this to work for more than one round?

[flydev]

Hello @Niku,

sorry I am not giving you the right answer but..

4 hours ago, Niku said:

asmSelect allowing multiple selections

You could take a look at this module : https://modules.processwire.com/modules/inputfield-select-multiple-transfer/

From the module's description it look like it could save you time

[Robin S]

Whoops, somehow overwrote my original post.

10 hours ago, Niku said:

This works for first time an option is selected in asmSelect, but second round fails.

I recall striking this problem too. The code below works for me on a front-end AsmSelect inside a FormBuilder form - should be the same on the backend. In this case I am adding/removing items from the AsmSelect when a grid square on a map is clicked.

// Add hectare to AsmSelect
$map.on('click', '.sponsorable:not(".selected")', function() {
    var hectare = $(this).data('hectare');
    $('#Inputfield_hectares_to_sponsor').children('option[value="' + hectare + '"]').prop('selected', true).end().change();
});
// Remove hectare from AsmSelect
$map.on('click', '.sponsorable.selected', function() {
    var hectare = $(this).data('hectare');
    $('#Inputfield_hectares_to_sponsor').children('option[value="' + hectare + '"]').prop('selected', false).end().change();
});

 

 

Edited August 8, 2017 by Robin S
Tried to edit but somehow lost my original post. So recreated it.

[Niku]

Thank you @Robin S!

I made these changes based on your reply and now it works:

// Adding values from:
$addonSelect.children('[value="' + valueToSelect + '"]').attr('selected', true).end().change();
// to:
$addonSelect.children('[value="' + valueToSelect + '"]').prop('selected', true).end().change();

// Removing values from:
$addonSelect.children().removeAttr('selected').end().change();
// to:
$addonSelect.children().prop('selected', false).end().change();

So I switched from attr() to prop(). Lesson learned: do not use attr(), use prop().