Jump to content

Manipulating asmSelect with JavaScript (solved)


Niku
 Share

Recommended Posts

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?

Link to comment
Share on other sites

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 by Robin S
Tried to edit but somehow lost my original post. So recreated it.
Link to comment
Share on other sites

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().

  • Like 1
Link to comment
Share on other sites

  • Niku changed the title to Manipulating asmSelect with JavaScript (solved)

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...