HTML/Javascript - Select same option twice by setting selected index onFocus

Question

I'm trying to implement a select that calls a function even if the same option is selected twice. Following one of the answers on this thread, I've set the selectedIndex to -1 on focus. However, I'm still not getting the function call when the same option is selected twice.

var scaleSelect = new ComboBox({
      id: "scale_select",
      style: {width: "150px"},
      name: "scale_select",
      placeHolder: "Choisir une échelle",
      store: scaleStore,
      disabled: true,
      onFocus: function() {
       this.selectedIndex = -1;
       console.log(this.selectedIndex); //-1
      },
      onChange: function(value){
        mapScale = value;
        window.myMap.setScale(mapScale);
      }
    }, "scale_select");
    scaleSelect.startup();

UPDATE Attempting to set the selected index within onChange still doesn't call the function--wondering if this has to do with the fact that selected index is undefined onChange..

var scaleSelect = new ComboBox({
      id: "scale_select",
      style: {width: "150px"},
      name: "scale_select",
      placeHolder: "Choisir une échelle",
      store: scaleStore,
      disabled: true,
      onChange: function(value){
        mapScale = value;
        window.myMap.setScale(mapScale);
        var mySelect = document.getElementById("scale_select");
        console.log(this.selectedIndex) //undefined
        this.selectedIndex = -1;
        mySelect.selectedIndex = -1;
        console.log(this.selectedIndex); //-1
        console.log(mySelect.selectedIndex); //-1
      }
    }, "scale_select");
    scaleSelect.startup();

It would fire too often, i think..I would have to add some conditions in that case. I'm not seeing why I can't adapt the answer in the related link.. — user25976, Jan 25 '17 at 20:53
you could reset the value and update the placeholder text to make it seem like it had persistent selctions — Chase, Jan 25 '17 at 20:55
@Chase what do you mean 'make it seem like it had persistent selections'? — user25976, Jan 25 '17 at 21:21

nibnut · Answer 1 · 2017-01-26T12:04:44.150

0

So I think the problem is that after you've picked a value in the select, it doesn't lose focus. So your onFocus handler won't get called unless the user actually clicks somewhere else on the page. If she doesn't do that, then the select's value won't fire the onChange if she selects the same value again.

So instead of setting the selected index on focus, why not do it in onChange, after you've handled the change? That way your select will be primed for another selection as soon as you're done treating the current one.

UPDATE

Ok, so looking at the Dojo code, this is the best I could come up with:

var scaleSelect = new ComboBox({
  id: "scale_select",
  style: {width: "150px"},
  name: "scale_select",
  placeHolder: "Choisir une échelle",
  store: scaleStore,
  disabled: true,
  onChange: function(value){
    if(value) { // the .reset() call below will fire the onChange handler again, but this time with a null value
        mapScale = value;
        window.myMap.setScale(mapScale);
        console.log("Changed to", value, this);
        this.reset(); // This is the magic here: reset so you are guaranteed to isseu an "onChange" the next time the user picks something
    }
  }
}, "scale_select");
scaleSelect.startup();

Note that you need to start the whole thing with no value - or else that initial value won't issue an "onChange" event, and every time you reset the widget, it'll go back to the initial value...

Hope this helps!

edited Jan 26 '17 at 12:04

answered Jan 25 '17 at 20:55

nibnut

3,072
2
15
17

Your suggestion makes total sense, but it seems like the setting selectedIndex to -1 within onChange doesn't have an effect on onChange. See edits. – user25976 Jan 25 '17 at 21:09
Hmmm - so what is the value of "this" within the onChange handler? Is it the select? Or the ComboBox object? You'll want to set the *select*'s selectedIndex value - and you might have to let the ComboBox know about the new selection too. Or there might be a way to tell the ComboBox directly to reset the selection... – nibnut Jan 25 '17 at 21:16
I updated...I think I understood what you meant. Still no luck, but again, not sure if this is what you were suggesting – user25976 Jan 25 '17 at 21:32
Kind of is. But you have a whole class/object wrapped around the select (ComboBox) and I suspect the actual select is hidden by some custom controls. There's usually a way to tell plugins like ComboBox that you want to change the selected value... Do you have a link to ComboBox's documentation maybe? – nibnut Jan 25 '17 at 22:28
This is what I started with: https://dojotoolkit.org/reference-guide/1.10/dijit/form/ComboBox.html – user25976 Jan 25 '17 at 22:54

score 0 · Answer 2 · answered Jan 25 '17 at 22:03

I tested every things that i knew with no success. I wondering about the thread that you linked and answers with upvotes! I the reason is that a selected option is not an option any more. But i have a suggestion:

Create your own custom Select

It is only a textbox and a div under that with some links line by line.

HTML/Javascript - Select same option twice by setting selected index onFocus

2 Answers2