Select / deselect using JS on iOS 6.x (iPad)

Question

I am creating a dynamic rollback using the html <select> with the multiple attribute and the first parameter selected by default:

 <select multiple="multiple" size="1"> <option value="" selected="selected">All</option> <option value="1">One</option> <option value="2">Two</option> </select> 

For example, the “Disable User” option is One , and then the intended behavior is to deselect All and select the One option.

When the iPad browser opens its own user interface for the drop-down list, I can catch the touch events from the drop-down list (code fragments from my plugin):

 this.$el.on('change', this.selectOption, this); 

and manipulate the parameters to deselect them as follows:

 selectOption: function(e){ var opts = element.find('option'); opts.each(function(idx, opt){ $(opt).prop('selected', false); }); } 

Problem

The options properties are set to false correctly, but visually in the iPad drop-down list. The parameters of the selected user interface remain unchanged, which may confuse the user.
Changes in the user interface are applied after clicking Finish in the drop-down list. The next opening shows all the options that are not selected, but this is a bit, but a little late, -).

Question

Is it possible to select / deselect in the order in which the user deletes one parameter and the other disconnects in real time in the iPad drop-down list?

Answer 1

When we run <select> on iOS, it will use its own control over the browser, in addition to our style ability.

It respects the multiple="true" attribute and acts accordingly.

The question is that equiv asks the question: "How can I make the browser toolbar blue when I click on the button of my web page"

Unclear why

• You set mutliple="true"
• Then set size=1
• Then try to make it behave like one select with javascript, only one choice.

---

I suspect that all you really need is to remove the multiple = "true" attribute and possibly increase the size (if you want all parameters to be visible)

 <select size="3"> <option value="" selected="selected">All</option> <option value="1">One</option> <option value="2">Two</option> </select> 

Then the built-in iOS controls can behave the way you want.

For all other solutions, review the selection (or hide it) and create a javascript user control made from <ul><li> or similar to populate the values ​​behind the scenes.