Formatting text of individual choices in selectInput dropdown menu

Question

I would like format the text of individual choices displayed in a selectInput() dropdown menu. I have a list of text strings with html attributes:

myChoices_list <- c("<b>choice 1</b>", "<b>choice 2</b>", "<i>choice 3 </i>", "<i>choice 4</i>", "<<p style=\"text-indent: 20px\">choice 5</p>")

The html attributes call for bold, italics, and indentations applied to each string. I tried to apply the attributes with the HTML() function in the 'choices' option but with no luck.

ui <- fluidPage(
sidebarPanel(
  selectInput(inputID = "myChoice", "Choice:"
             , choices = HTML(myChoices_list))
  )
)

While these formats work correctly in the mainPanel by setting an 'escape' option to FALSE in the server segment's output, the option doesn't appear to be available for the dropdown menu in selectInput().

I think the solution might have something to do with tags$style, but I am new to the structure of shiny and designation of text formats. It's also different from How to style an single individual selectInput menu in R Shiny? in that the html formats are already part of the list. The actual list is a large one as well.

Possible duplicate of How to style an single individual selectInput menu in R Shiny? — Vishesh Shrivastav
the link you suggests formats the choices by specified name. What I am hoping to do is allow for the html formats already designated in a list to be used in the dropdown menu. — Peter Ip

Jeime Anne Villanueva Jeime Anne Villanueva · Accepted Answer · 2018-10-31T06:35:22

Why not use jQuery for that?

$('#DropdownSelectID').change(function () {
  var selectedVal = $('#DropdownSelectID :selected').val();

  if (selectedVal == '1') {
     $("#DropdownSelectID").css('cssText', 'font-weight: bold; color: blue');
  }
  else if (selectedVal == '2') {
     $("#DropdownSelectID").css('cssText', 'color: red');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<select id='DropdownSelectID'>
  <option value='0'>-- Select --</option>
  <option value='1'>Hi</option>
  <option value='2'>Hello</option>
</select>

Formatting text of individual choices in selectInput dropdown menu

1 Answers