JSFiddle - React, Tailwind, and code Playground
HTML
<select id="main">
<option class="o1">o1</option>
<option class="o2">o2</option>
<option class="o3">o3</option>
</select>
<br/>
<button id="r_o1" data-ref=".o1">hide o1</button>
<button id="r_o2" data-ref=".o2">hide o2</button>
<button id="r_o3" data-ref=".o3">hide o3</button>
<br/>
<button id="a_o1" data-ref=".o1">show o1</button>
<button id="a_o2" data-ref=".o2">show o2</button>
<button id="a_o3" data-ref=".o3">show o3</button>
<div id="show">123</div>
JavaScript
jQuery.fn.selectOption = function () {
var $this = jQuery(this);
var selectOption = $this.data('selectOption');
if (selectOption) {
return selectOption;
}
selectOption = new jQuery.MoaSelectOption(this);
$this.data('selectOption', selectOption);
return selectOption;
};
jQuery.fn.hideOption = function (selector) {
var $this = jQuery(this);
var selectOption = $this.data('selectOption');
if (!selectOption) {
throws('no selectOption defined');
}
selectOption.hideOption(selector);
};
jQuery.fn.showOption = function (selector) {
var $this = jQuery(this);
var selectOption = $this.data('selectOption');
if (!selectOption) {
throws('no selectOption defined');
}
selectOption.showOption(selector);
};
jQuery.fn.showAllOption = function () {
var $this = jQuery(this);
var selectOption = $this.data('selectOption');
if (!selectOption) {
throws('no selectOption defined');
}
selectOption.showAllOption();
};
jQuery.fn.hideAllOption = function () {
var $this = jQuery(this);
var selectOption = $this.data('selectOption');
if (!selectOption) {
throws('no selectOption defined');
}
selectOption.hideAllOption();
};
jQuery.MoaSelectOption = function (select) {
this.select = select;
this.init();
};
jQuery.extend(jQuery.MoaSelectOption, {
prototype: {
init: function () {
this.$options = jQuery(this.select).children('option');
},
hideOption: function (selector) {
this.memoValue();
jQuery(this.select).children().each(function (idx, e) {
if (jQuery(e).filter(selector).length == 1) {
jQuery(e).remove();
}
});
},
showOption: function (selector) {
this.memoValue();
this.childrenValues();
jQuery(this.select).children().remove();
var _this = this;
...