javascript - 在 Select option value selected 中更改 css

Question

我有一种形式，一个选择一个问题，如果选择了确定的值，我不需要显示下一个问题。如何制作一个 jquery 代码来检测用户在 select 中选择了一个确定的选项并更改页面的 CSS？

<select>
   <option value="volvo">Volvo</option>
   <option value="saab">Saab</option>
   <option value="mercedes">Mercedes</option>
   <option value="audi">Audi</option>
</select>

标签： javascriptjqueryhtmlcss

Answer 1

你的问题有点含糊，但我认为这是你的追求：

 const value = $('#selectID option[value=""]').prop("selected", true);

 if (value....") {
     // do css stuff
 }

此外，您可以像这样获取值/文本：

<select id="car_manufacturer">
   <option value="volvo">Volvo</option>
   <option value="saab">Saab</option>
   <option value="mercedes">Mercedes</option>
   <option value="audi">Audi</option>
</select>

<script>
   const element = document.getElementById("car_manufacturer");
   const value = element.options[element.selectedIndex].value;
   const text = element.options[element.selectedIndex].text;
 </script>

您可以在 select 元素上使用 onchange 事件扩展上述内容。

<select id="car_manufacturer" onchange="selectManufacturer(this)">

操作 CSS：

JavaScript：

document.body.style.backgroundColor = "red";

jQuery：

$("body").css("background-color","red");

小提琴

onchange使用 css 操作的示例：

http://jsfiddle.net/9L0czmeq/