Indentation for specific options

[RenugaP]

I have to include indentation for specific options based on condition in the drop down option.
Can you please provide me your suggestions?

[Robert DeLuca]

You can target the specific options with the :nth-child css selector.

[RenugaP]

Thank you.
But if we want to select options based on the value in the text.
eg. if i am having option like abc(12), abc(123) and i have to calculate the length of the number in the option and accordingly i have to include indentation if the length is three.

Also how to extract the length of the number from the option using javascript

Please provide your suggestions on this?

[Robert DeLuca]

Can you provide a codepen or jsbin example?

[RenugaP]

Sorry.We are using dropkick for drop down and knockout for bindings..

I have tried adding class to the options using $(#id ul li).addClass('temp');
But i want to add only to specific options based on length of number in the text.

How to select text of anchor tag using jquery

[Robert DeLuca]

Something this should do:

  $("#id li").each(function(){
    if($(this).length > 3){
      $(this).addClass("temp");
    }
  });

I haven't tested the code so it will probably take some adjusting.

[RenugaP]

Thank you for your suggestions.
It is not working because $(this) represents the whole list not specific to the condition..

[Wil Wilsman]

If you could, at the least, provide us with some bit of you're markup it would be much much easier to help you out.

If your markup looks something like this (from what I can gather from your previous responses):

<select id="id">
  <option>abc(12)</option>
  <option>abc(123)</option>
</select>

then you are going to need a regular expression to extract the numbers.

Something like this should be what you need:
note: this is ran before Dropkick

document.getElementById("id").options.forEach(function () {
  var n = this.value.replace("^abc\(([0-9]*?)\)", "$1");
  if (n.length == 3) this.classList.add("indented-option");
});

Alternatively, If the options are going to reliably contain "abc(some number)", then you could forgo the regular expression and just add the length of the other text to your check. Minus the length of the number, that example contains 5 characters. So your expected length should be 8.
(i.e. if (this.value.length == 8) // add class or change style).

Any classes an option contains will be carried over to the Dropkick's elements.

Then just style .indented-option with an extra left padding.

jQuery Equivalent:

$("#id option").each(function () {
  var $this = $(this),
    n = $this.val().replace("^abc\(([0-9]*?)\)", "$1");
  if (n.length == 3) $this.addClass("indented-option");
});