Dynamically adding optgroups

[proxima-b-alpha]

using .multiSelect('addOption', Hash) we can dynamically add options. Same way is it possible to add optgroups?

[muhlisatac]

+1

[wpecker]

+2

[wpecker]

For left to add addOption

[katarot]

Hello, idk if here would be the correct place to ask, but I also have this question/issue.

I have this list being populated by using a templating engine called Blade (https://laravel.com/docs/5.1/blade) with Laravel.

<select id='optgroup' multiple='multiple' name="modelos[]">
@foreach ($client->vehicles as $vehicle)
    <optgroup label='{{ $vehicle->brand }}'>
      <option value='{{ $vehicle->id }}' selected>{{ $vehicle->model }}</option>
     </optgroup>
@endforeach
</select>

...and this is the output with only $('#optgroup').multiSelect();

As you can see it's only populating the right column because of the selected attributed in the <option> element, such as <option value="..." selected>...</option>.

I can also populate the selectable column (the left one) dynamically with the following code, which is included in the <script> section of my code:

$('#optgroup').multiSelect(
{     
   afterInit: function(ms) {

// jQuery ajax to get data. 
     $.get("{{ url('api/vehicles') }}", function(data, status) {

//jQuery loop to iterate the returned data.
      $.each(data, function(index, element) {
         var id = index+1;

// Notice this here.
          $('#optgroup').multiSelect('addOption', 
            { value: element.brand, text: element.model, index: index }
          );

       });

});

... the output:

So, if I want to use the optgroup option to group my list as it is already doing on the selected column (the right one) but with the dynamic one, the left one, based on the 'addOption' feature in the website ( http://loudev.com/#usage ) .multiSelect('addOption', Hash) I would do the following:

$('#optgroup').multiSelect(
{     
   afterInit: function(ms) {

// jQuery ajax to get data. 
     $.get("{{ url('api/vehicles') }}", function(data, status) {

//jQuery loop to iterate the returned data.
      $.each(data, function(index, element) {
         var id = index+1;

// This below is new, this is just the data coming from the database. 
/* Which is the same as the value that it is given to value="" attribute in the '<select>' list above, 
   in the line <optgroup label='{{ $vehicle->brand }}'> .*/

         var _nested = element.brand;

// Notice this here.
          $('#optgroup').multiSelect('addOption', 
            { value: element.brand, text: element.model, index: index, nested: _nested }
          );

       });

});

And this is the output:

Not how I thought it would appear. Shouldn't the label attribute value, "this_value" in <optgroup label="this_value"> be the same value as in the nested attribute in the line { value: element.brand, text: element.model, index: index, nested: "this_value" } make the effect of the grouping option?

See Optgroup and .multiSelect('addOption', Hash) in http://loudev.com/#usage .

[vinnyvimto]

I'll comment here because this is the first discussion about this I came across while looking.

After wasting my time trying to even use the 'addOption' I eventually discovered it was much easier and more robust to just add or remove the optgroups and child options to the original select and then call $('.your-select').multiSelect('refresh).

[katarot]

Hello, and thank you for replying. I honestly forgot I wrote this, but yay! Someone replied. :) Thank you. I'll try that later, and will let know if it worked, ... and keep talking about this. :)

[jony54]

Hi, I was trying to dynamically add options from mysql database. When I looked into your example you oused api/vehicles file to load the data. Can you show how you are bringing in the data element.brand, text: element.model from the file? Thanks

[BenHall-1]

Did anyone figure out a way to do this in the end?