Как мне создать форму :: select, чтобы запустить сценарий, чтобы изменить цель, чтобы стиль менялся каждый раз, когда выбирается другая опция?

Question

Проблема в том, что я работаю с Laravel Form :: select (), и он выбирает приоритет.У каждого Субприорита есть цвет фона.Поэтому я установил стиль для каждого, который проверяет идентификатор и цель, поэтому моя идея заключалась в том, чтобы иметь скрипт, который изменяет цель формы при выборе текущей опции в раскрывающемся списке.Но я не могу заставить javascript работать, когда происходит изменение или если оно происходит, я не могу заставить его изменить цель.

Я пытался использовать jquery, ajax, javascript и созданиеСценарий похож на тот, что работает для поля приоритета, но, похоже, ничего не работает.

<style>
    #sub[target="65"]{
        background-color: #006600;
        color: white;
    }
    #sub[target="66"]{
        background-color: #99ff66;
        color: white;
    }
    #sub[target="67"]{
        background-color: #bbff99;
        color: white;
    }
    #sub[target="68"]{
        background-color: #ffff99;
        color: white;
    }
    #sub[target="69"]{
        background-color: #ffff80;
        color: black;
    }
    #sub[target="70"]{
        background-color: #ffff00;
        color: white;
    }
    #sub[target="71"]{
        background-color: #ff944d;
        color: white;
    }
    #sub[target="72"]{
        background-color: #ff751a;
        color: white;
    }
    #sub[target="73"]{
        background-color: #ff6666;
        color: white;
    }
    #sub[target="74"]{
        background-color: #800000;
        color: white;
    }
</style>

{!! Form::select('subpriority', [65=>'A',66=>'B',67=>'C',68=>'D',69=>'E',70=>'F',71=>'G',72=>'H',73=>'I',74=>'J'], 69, [ 'class' => 'form-control', 'id'=> 'sub', 'target'=>'69' ]); !!}

<script>
    $(#sub).change(function(){
        $(#sub).setAttribute('target', $(#sub).val());
    });
</script>

Поэтому я хочу просто изменить цвет фона формы выбора при выборе новой опции.Сейчас он правильно устанавливает стиль для #sub [target = "69"], но либо цель не меняется, либо стиль не меняется вместе с целью.Таким образом, раскрывающийся список начинается с желтого цвета с буквой Е. Если я изменю на А, цвет фона должен измениться на зеленый.Так и так далее для других вариантов.

Answer 1

Вы используете смесь jQuery и ванильного JavaScript здесь.setAttribute() это не метод jQuery, а обычный JavaScript.Вы также забыли добавить одинарные или двойные кавычки вокруг ваших селекторов.В будущем откройте консоль разработчика вашего браузера, нажав клавишу F12, и посмотрите в консоли, чтобы увидеть, есть ли какие-либо ошибки JavaScript.Это быстро показало бы вам, что не так с кодом.

Кстати, для нативного элемента select не определен атрибут target, поэтому лучше использовать пользовательский атрибут data-target,Я изменил свой пример кода, чтобы отразить это.

Вот исправленный код с использованием jQuery:

Использование attr() вместо setAttribute()

$('#sub').change(function(){
    $('#sub').attr('data-target', $('#sub').val());
});

    #sub[data-target="65"]{
        background-color: #006600;
        color: white;
    }
    #sub[data-target="66"]{
        background-color: #99ff66;
        color: white;
    }
    #sub[data-target="67"]{
        background-color: #bbff99;
        color: white;
    }
    #sub[data-target="68"]{
        background-color: #ffff99;
        color: white;
    }
    #sub[data-target="69"]{
        background-color: #ffff80;
        color: black;
    }
    #sub[data-target="70"]{
        background-color: #ffff00;
        color: white;
    }
    #sub[data-target="71"]{
        background-color: #ff944d;
        color: white;
    }
    #sub[data-target="72"]{
        background-color: #ff751a;
        color: white;
    }
    #sub[data-target="73"]{
        background-color: #ff6666;
        color: white;
    }
    #sub[data-target="74"]{
        background-color: #800000;
        color: white;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>
  <select data-target="69" class="form-control" id="sub">
    <option value="65">A</option>
    <option value="66">B</option>
    <option value="67">C</option>
    <option value="68">D</option>
    <option value="69">E</option>
    <option value="70">F</option>
    <option value="71">G</option>
    <option value="72">H</option>
    <option value="73">I</option>
    <option value="74">J</option>
  </select>
</form>

А вот как вы могли бы сделать это с помощью обычного JavaScript, сэкономив издержки, если вы все равно не используете jQuery.

var sub = document.getElementById('sub');

sub.addEventListener('change', function() {
  this.setAttribute('data-target', this.value);
});

    #sub[data-target="65"]{
        background-color: #006600;
        color: white;
    }
    #sub[data-target="66"]{
        background-color: #99ff66;
        color: white;
    }
    #sub[data-target="67"]{
        background-color: #bbff99;
        color: white;
    }
    #sub[data-target="68"]{
        background-color: #ffff99;
        color: white;
    }
    #sub[data-target="69"]{
        background-color: #ffff80;
        color: black;
    }
    #sub[data-target="70"]{
        background-color: #ffff00;
        color: white;
    }
    #sub[data-target="71"]{
        background-color: #ff944d;
        color: white;
    }
    #sub[data-target="72"]{
        background-color: #ff751a;
        color: white;
    }
    #sub[data-target="73"]{
        background-color: #ff6666;
        color: white;
    }
    #sub[data-target="74"]{
        background-color: #800000;
        color: white;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>
  <select data-target="69" class="form-control" id="sub">
    <option value="65">A</option>
    <option value="66">B</option>
    <option value="67">C</option>
    <option value="68">D</option>
    <option value="69">E</option>
    <option value="70">F</option>
    <option value="71">G</option>
    <option value="72">H</option>
    <option value="73">I</option>
    <option value="74">J</option>
  </select>
</form>