Styling text that appears in select box

Hi,
I am loading items in a modal that has a select box, and i would like to seperate the content of the select box by making a part of the text to be bold.

My select box looks like this :slight_smile:

I would like it to look like this:

My code currently is

request({

                    url: "{{route('pharmacy.prescriptions.get-products.rest')}}",

                    type: 'GET',

                    success: function (response) {

                        $(response).each(function (index, product) {

                            if((product != undefined) && (product != null) ) {

                                productUuid.append($('<option>').val(product.uuid).text(

                                product.generic_name + ' ' +

                                (product.brand_name != null ? product.brand_name : '' )  + ' ' + 'AvailableStock' + ' ' + product.stock));

                            }    

                        }); 

                        addPrescriptionModal.modal('show');

                    },

i have tried this, but it displays as text instead of html :slight_smile:

request({
                    url: "{{route('pharmacy.prescriptions.get-products.rest')}}",
                    type: 'GET',
                    success: function (response) {

                        $(response).each(function (index, product) {

                            if((product != undefined) && (product != null) ) {

                                productUuid.append($('<option>').val(product.uuid).text(
                                product.generic_name + ' ' +
                                (product.brand_name != null ? product.brand_name : '' )  + '<strong>AvailableStock </strong>' + ' ' + product.stock));

                            }    

                        }); 

                        addPrescriptionModal.modal('show');

                    },

Not sure but you probably need to use string literal.

`${   }     <strong>AvailableStock</strong>`

Anyway hope someone who knows better will answer.

Just from a quick glance, you could try using .html instead of .text.

If I understand correctly, then that would not be valid HTML. The permitted content for the option element is text.

You can use CSS to style the elements, but I’m not really sure how you would target specific parts of the text content. I would guess you’d have to use a custom created option element for this.