-1

Есть select в котором есть option. Как сделать добавление стилей тому option в котором только одна точка?

<select>
    <option>.1</option>
    <option>..2</option>
    <option>..3</option>
    <option>.2</option>
    <option>..1</option>
    <option>..2</option>
</select>

Я написал условия, но у меня косяк

if($("option").text().indexOf('.') > 0 ){
    $("option").css("background-color", "red");
}
else {
    $("option").css("background-color", "green");
}

2 ответа 2

0

Можно сделать без js, правда придется добавить value с таким же значением

select option[value^="."] {
    background-color: red;
}
select option[value^=".."] {
    background-color: initial;
}
<select>
    <option value=".1">.1</option>
    <option value="..2">..2</option>
    <option value="..3">..3</option>
    <option value=".2">.2</option>
    <option value="..1">..1</option>
    <option value="..2">..2</option>
</select>

3
  • $( "option:contains('. ')" ).css( "background-color", "red" ); Я сделал вот так вот 17 сен 2018 в 8:55
  • НО, как сделать для option конкретно с одной точкой? 17 сен 2018 в 8:55
  • @АлександрТкаченко, обновил ответ
    – Bert
    17 сен 2018 в 9:04
0

Цвет зависит от второго символа в тексте у option(textContent[1] === '.') Но этот скрипт учитывает что всегда идет две точки или точка.

const options = document.querySelector('select').options

;[...options].forEach(i => 
  i.style['background-color'] = (i.textContent[1] === '.' ? 'red' : 'green')
)
<select>
  <option>.1</option>
  <option>..2</option>
  <option>..3</option>
  <option>.2</option>
  <option>..1</option>
  <option>..2</option>
  <!-- если такого не будет в селекте -->
  <option>o.text</option>
  <option>text</option>
</select>

Более надежный но длиннее код. Сравнивает честь строки через slice

const options = document.querySelector('select').options

;[...options].forEach(i => {
  let color
  if (i.textContent.slice(0, 2) === '..')
    color = 'red'
  else if (i.textContent.slice(0, 1) === '.')
   color = 'green'
   
  i.style['background-color'] = color
})
<select>
  <option>.1</option>
  <option>..2</option>
  <option>..3</option>
  <option>.2</option>
  <option>..1</option>
  <option>..2</option>
  <option>o.text</option>
  <option>text</option>
</select>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.