All geek questions in one place

Jquery select multiple choices and deselect (on ipad)

I have a problem with selecting and deselecting options on the iPad.

"Shop by Color" is an option with no value, so when this option is selected, it will display all the items. When any other option is selected, it will display the items in this category.

All I want:

  • when you click on the .othervalue options, "Shop by Color" (.firstvalue) you should unselect and clicked option should be selected
  • when you click on the .firstvalue parameter, it should be selected and all other parameters (.othervalue) should be canceled

Here is what I tried:

$(document).ready(function() { $('select').change(function() { var $this = $(this); if($("option.firstvalue").is(":selected")) { $this.find('option:first').attr('selected', false); } else { $this.find('option:gt(0)').attr('selected', false); } }); });

** Full code: http://jsfiddle.net/GNpzq/ **

I think I should use $ ('select'). change (), because the iPad fires this event correctly, but I'm not sure.

Can someone help me with this code?

Thanks!

EDIT: here is the code that solved the problem, maybe someone will use it.

 $(function() { // select and deselect default OPTION for filters var firstSelectState = new Array; var optionsArray = new Array; $('select').change(function() { var id = this.id; if (!id) { id = Math.round(Math.random()*99999); this.id = id; } if (typeof(firstSelectState[id])=="undefined") firstSelectState[id] = this.options[0].selected; var tmpOptionsArray = new Array(); for (var i = 1; i<this.options.length; i++) { tmpOptionsArray[i] = this.options[i].selected; } if (typeof(optionsArray[id])=="undefined") { optionsArray[id] = tmpOptionsArray; } var firstSelected = (firstSelectState[id]!=this.options[0].selected); var otherSelected = false; for (var i = 1; i<this.options.length; i++) { if (optionsArray[id][i]!=tmpOptionsArray[i]) { otherSelected = true; break; } } optionsArray[id] = tmpOptionsArray; if (firstSelected && !otherSelected) { for (var i = 1; i<this.options.length; i++) { this.options[i].selected = false; } } else { this.options[0].selected = false; firstSelectState[id] = false; } }); });
+4
source share
1 answer

You are currently denying any choice, your conditions say that if the first option is selected, deselect; if others are selected, deselect them, try the following:

 $('select').change(function() { if (this.selectedIndex === 0) { $('option:gt(0)', this).prop('selected', false); } else { $('option:first', this).prop('selected', false); } });

http://jsfiddle.net/LynCV/

+1
source

Source: https://habr.com/ru/post/1443491/

More articles:


All Articles