Question

I have this conditional select, which does what it’s supposed to. See fiddle here. But I would like to make an exception or change to one of the items.

If you select “Other brands” in the first select box, then there’s a long text in the second select box because the script takes the text from the corresponding div:

$selector.append("<option value='" + $(this).attr('id') + "'>" + $(this).text() + "</option>");

I would like there to be another (shorter) text in the second select box – but only for this item – and without changing the content of the div.

How do I do that?

Answer 1

You could do an if that says:

if( $(this).text() != "Content not to be displayed in select box" ){
//-- if something should be shown. change the text here --//
      }else{
             //-- if the shorter text should be shown --//
}

If you set $(this).text() as a variable and then inject that, if the variable is too long, you can swap out the text for something else…