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

Question

问题是我正在使用 Laravel Form::select() 并且它是选择子优先级。每个子优先级都有一个背景颜色。所以我为每个检查 id 和 target 的样式设置了一个样式，所以我的想法是有一个脚本，在选择下拉列表中的当前选项时更改表单的目标。但我似乎无法在发生更改时运行 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"] 的样式，但要么目标没有改变，要么风格没有随目标而改变。所以下拉框以字母 E 开头的黄色。如果我更改为 A，则背景颜色应更改为绿色。其他选项依此类推。

Answer 1

您在这里混合使用了 jQuery 和 vanilla 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>

下面是使用 vanilla 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>