如何使用jquery使用選擇選項的值更改提交按鈕的顏色

Question

我想在單擊選定選項后更改提交按鈕的顏色，例如：跑車的購買者單擊以下選項之一：1.法拉利2.蘭博基尼3.保時捷

根據所選選項中的所選汽車，提交按鈕應將顏色變為綠色。 我該如何使用jquery庫和代碼？

我嘗試了以下代碼，但不起作用！

jQuery代碼：

`$(document).ready(function() {
    $('select.cars').bind(function(){
    $('.SubmitButton').addClass('ButtonColor'); 
    });
    });`

html代碼：

`<select class="cars">
      <option value="ferrari">Ferrari</option>
      <option value="lamborghini">Lamborghini</option>
      <option value="porsche">Porsche</option>
    </select> 
      <input class="SubmitButton" type="submit" value="Go to Car">`

CSS代碼：

.SubmitButton {width:150px;} .ButtonColor {color:green;}

我的代碼無法正常工作-有人幫我解決該問題嗎？

Answer 1

您需要更改綁定才能更改事件

$(document).ready(function() {
    $('select.cars').change(function(){
      if($(this).val() == 'lamborghini'){
         $('.SubmitButton').removeClass('ButtonColor1');
         $('.SubmitButton').addClass('ButtonColor');
      }else if($(this).val() == 'porsche'){
      $('.SubmitButton').removeClass('ButtonColor');
         $('.SubmitButton').addClass('ButtonColor1');
      }
    });
});

 $(document).ready(function() { if($("select.cars").val() == ""){ $(".SubmitButton").attr("disabled", "disabled"); } $('select.cars').change(function(){ if($(this).val() == 'lamborghini'){ $(".SubmitButton").removeAttr("disabled"); $('.SubmitButton').removeClass('ButtonColor1'); $('.SubmitButton').addClass('ButtonColor'); }else if($(this).val() == 'porsche'){ $(".SubmitButton").removeAttr("disabled"); $('.SubmitButton').removeClass('ButtonColor'); $('.SubmitButton').addClass('ButtonColor1'); } else if($(this).val() == 'ferrari'){ $(".SubmitButton").removeAttr("disabled"); $('.SubmitButton').removeClass('ButtonColor'); $('.SubmitButton').addClass('ButtonColor2'); } else if($("select.cars").val() == ""){ $(".SubmitButton").attr("disabled", "disabled"); } }); var mstart = $("select.cars option").filter(function() { return $(this).text().indexOf("M") === 0; }) }); Updated: If you want to find option start with M you can use this var mstart = $("select.cars option").filter(function() { return $(this).text().indexOf("M") === 0; }) 

 .SubmitButton {width:150px;} .ButtonColor {color:green;} .ButtonColor1 {color:red;} .ButtonColor2 {color:blue;} 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select class="cars"> <option value=""></option> <option value="ferrari">Ferrari</option> <option value="lamborghini">Lamborghini</option> <option value="porsche">Porsche</option> <option value="porsche">Mercedes</option> <option value="porsche">Mazda</option> </select> <input class="SubmitButton" type="submit" value="Go to Car"> 

Answer 2

    $(document).ready(function() {
        $('select.cars').change(function(){
        $('.SubmitButton').addClass('ButtonColor'); 
        });
    });
----------------- OR--------------------
$(document).ready(function() {
        $('select.cars').on( 'change', function(){
        $('.SubmitButton').addClass('ButtonColor'); 
        });
    });