我如何有一个form :: select运行脚本来更改目标，以便每次选择不同的选项时样式都会更改？

Question

The problem is I'm working with a Laravel Form::select() and it's to choose the subpriority. Each Subpriority has a background color. So I set a style for each one that checks the id and target so my idea was to have a script that changes the target of the form when the current option in the dropdown is selected. But I can't seem to get javascript to run when a change occurs or if it does, I can't get it to change the target.

I've tried using jquery, ajax, javascript and creating a similar script to what runs for the priority box but nothing seems to work.

<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>

So I want it to just to change the background color of the select form when I select a new option. Right now it properly sets it to the style for #sub[target="69"] but either the target isn't changing or the style doesn't change with the target. So the dropdown box starts off yellow with the letter E. If I change to A, then the background color should change to green. So and so forth for the other options.

Answer 1

You are using a mixture of jQuery and vanilla JavaScript here. setAttribute() is not a jQuery method, but ordinary JavaScript. You also forgot to add single or double quotes around your selectors. In the future, open up the developer console of your browser by pressing F12 and look in the console to see if there are any JavaScript errors. That would have quickly shown you what is wrong with the code.

By the way, a native select element has no target attribute defined, so it would be better to use a custom data-target attribute. I changed my example code to reflect that.

Here's the fixed code using jQuery:

Using attr() instead of 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> 

And here's how you could do it with vanilla JavaScript, saving the overhead if you're not using jQuery anyway.

 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>