За последние 24 часа нас посетили 22894 программиста и 1262 робота. Сейчас ищут 763 программиста ...

Как выделить цветом select option в зависимости от выбранного значения

Тема в разделе "PHP для новичков", создана пользователем ara05ru, 19 фев 2020.

  1. ara05ru

    ara05ru Новичок

    С нами с:
    18 апр 2019
    Сообщения:
    68
    Симпатии:
    0
    Здравствуйте друзья. Подскажите пожалуйста как выделить цветом выбранный элемент из выпадающего списка, который состоит из трех значений (на рассмотрении, одобрено и отклонено). То есть когда выбрано "одобрено", чтоб был зеленым, когда "отклонено", красным. Php берет эти данные с базы. С помощью js или php как мне лучше это сделать ?
    Вот что выдает консоль.
    <select id="status" data-id="7">
    <option value="0">на рассмотрении</option>
    <option value="1" selected="">одобрено</option>
    <option value="2">отклонено</option>
    </select>
     
  2. ara05ru

    ara05ru Новичок

    С нами с:
    18 апр 2019
    Сообщения:
    68
    Симпатии:
    0
    Код (Javascript):
    1. $('select').on('change', function(){
    2.                 var $option = $(this);
    3.                 if ($option.val() == '1') {
    4.                     $option.css('color','red');
    5.                 } else {
    6.                     $option.css('color','black');
    7.                 }
    8.             }).change();
    вот такой скрипт есть, но почему то не работает.
     
  3. Valick

    Valick Активный пользователь

    С нами с:
    12 авг 2018
    Сообщения:
    1.911
    Симпатии:
    328
    HTML:
    1.  
    2.     .color2{color:red}
    3.     .color1{color:green}
    4.     option{color:black}
    5. <select class="color1" id="status" data-id="7" onchange="this.className='color' + this.value">
    6.     <option value="0">на рассмотрении</option>
    7.     <option value="1" selected>одобрено</option>
    8.     <option value="2">отклонено</option>
    9.  
     
    #3 Valick, 19 фев 2020
    Последнее редактирование: 19 фев 2020
  4. ara05ru

    ara05ru Новичок

    С нами с:
    18 апр 2019
    Сообщения:
    68
    Симпатии:
    0
    как сделать чтоб не при выборе из списка он менял цвет, а при загрузке страницы сразу меняла цвет на соответсвующий цвет исходя из value ?
    class="color1" я убрал, потому что, что бы не выбрал, то после перезагрузки цвет становился зеленым. class="color + this.value" можно ли вот так написать. чтоб исходя из value менялся class?
     
    #4 ara05ru, 19 фев 2020
    Последнее редактирование: 19 фев 2020
  5. Valick

    Valick Активный пользователь

    С нами с:
    12 авг 2018
    Сообщения:
    1.911
    Симпатии:
    328
    @ara05ru, ты как на сервере присваиваешь selected нужному option? Вот точно так же можно прописать класс для select в зависимости от отмеченного option.
     
  6. ara05ru

    ara05ru Новичок

    С нами с:
    18 апр 2019
    Сообщения:
    68
    Симпатии:
    0
    HTML:
    1. <select class="color<?= $sss; ?>" id="status" data-id="<?= $item['id'] ?>">
    2.                                                 <? foreach ($status as $k => $v) { ?>
    3.                                                     <option value="<?= $k; ?>" <?= $k == $item['status'] ? " selected" : ""; ?>><?= $v; ?></option>
    4.                                                     <?$sss=$k?>
    5.                                                 <? } ?>
    6.                                             </select>
    вот так пробую делать , не получается
     
  7. Valick

    Valick Активный пользователь

    С нами с:
    12 авг 2018
    Сообщения:
    1.911
    Симпатии:
    328
    class="color<?= $item['status']; ?>"
     
  8. ara05ru

    ara05ru Новичок

    С нами с:
    18 апр 2019
    Сообщения:
    68
    Симпатии:
    0
    здорово !!! спасибо огромное !
     
  9. Valick

    Valick Активный пользователь

    С нами с:
    12 авг 2018
    Сообщения:
    1.911
    Симпатии:
    328
    @ara05ru, вместо огромного спасибо можешь перевести 10 рублей на яндекс деньги)) ссылки в подписи
     
  10. ara05ru

    ara05ru Новичок

    С нами с:
    18 апр 2019
    Сообщения:
    68
    Симпатии:
    0
    перевел )