Can-value with select optgroup

Unless I am missing something it appears that can-value in a containing does not work

-- choose-- one two one two

and an associated map

data = new can.Map({
answer: “item1-1;item2.1”;
});

Does not work

Eliminating the and everything is OK

Not using is a really bad idea as IRL the list is long and items need to be logically grouped.

In addition I am masking the using the chosen-select jQuery plugin which slightly complicates things but makes for a much nicer interface

In an earlier version (no can-value) I explicitly managed all the selected attributes in the JS but I REALLY don’t want to have to hack that again. Problem has come to light in porting an older app to the latest canjs (originally written for canjs 1.x) and adopting recommended best practices etc

Am I missing something ?

Any suggestions ??

Ron

The html markup is not showing, reposted, apologies …

<select multiple can-value=“answer”>
  <option value=""></option>
  <optgroup label=“group one”>
    <option value=“item1-1”>one</option>
    <option value=“item21-”>two</option>
  </optgroup>
  <optgroup label=“group two”>
    <option value=“item2-1”>three</option>
    <option value=“item2-2”>four</option>
  </optgroup>
</select>

and an associated map

data = new can.Map({
answer: “item1-1;item2-1”;
});

Does not work

Eliminating the <optgroup> and everything is OK

Not using <optgroup> is a really bad idea as IRL the list is long and items need to be logically grouped.

In addition I am masking the <select> using the chosen-select jQuery plugin which slightly complicates things but makes for a much nicer interface

In an earlier version (no can-value) I explicitly managed all the selected attributes in the JS but I REALLY don’t want to have to hack that again. Problem has come to light in porting an older app to the latest canjs (originally written for canjs 1.x) and adopting recommended best practices etc

Am I missing something ?

Any suggestions ??

Ron

@ron.yuen Have you tried using the newer binding syntax?

{($value)}="property"

I haven’t tested it with optgroups but I have gotten it to work as expected:

<select ($change)="onChange(%element.value)" {($value)}="value" id="{{name}}" class="form-control" name="{{name}}">

      {{#each properties.options}}

        <option value="{{value}}" {{#isSelected(value)}} selected {{/isSelected}}>{{label}}</option>

      {{/each}}

    </select>

Thanks for the response but it seems to make no difference. This strikes me as an artefact of the binding whereby the targets are not being found (because the optgroup gets in the way) but that’s speculation on my part.

Also, unless I am completely misunderstanding - always possible :slight_smile: - there is no need to specifically manage the ‘selected’ attribute in the <option>, it ‘just works’.

Surely that’s the point of 2-way binding …

When I first started with CanJS (couple of years ago or more) I was managing all the atributes like ‘checked/selected’ etc in the templates using the #if syntax but I’m trying to get away from all of that, and mostly succeeding.

The exceptions are this optgroup problem and checkboxes which are a pain in this respect. I’ve never found a satisfactory way of making 2-way binding work on checkboxes in such a way that a single atribute contains all the individual checked values (like a multiple select).

It seems to need code to make it work, again, perhaps I’ve missed something.

UPDATE

The select optgroup works ok in select single but fails in select multiple.

I’ve seen something around about possible bug in slect multiple but can’t find it at the mom …

Any thoughts when this will be fixed?

Created an example https://jsbin.com/medifub/edit?html,js,output

This was fixed in can-util 3.3.6 :tada:

1 Like