HTML / Javascript-通过将选定的索引设置为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();

Answer 1

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!

Answer 2

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.