e.g. select 1 have two option ‘stock’, ‘index’ and select 2 have around 400 options. Some are ‘stock’ type and some are ‘index’ type
so as I select value ‘index’ from select 1, all the options in select 2 except ‘index’ type should hidden
in select 2 I have added data-attr=“stock” or data-attr=“index” to identify stock and index type options
You could use a custom render template function on the “stock” select2 to suppress (by returning null) any item that doesn’t match the selected “index” type. However, the custom render template function only receives the Select2 data object for each <option>, which does not include your custom data-attr value. The data object passed to the custom render template function includes an element property which refers to the the <option> HTML element represented by that data object. You should be able to use that property to retrieve the data-attr property’s value to compare to the selected value of the “index” select2.