繁体   English   中英

根据选择的选择选项值更改CSS

[英]Change css based in Select option value selected

我采用一种形式,选择一个问题,即如果选择确定的值,则下一个问题不显示。 如何制作一个能够检测到用户在选择和更改页面CSS中选择了确定选项的jquery代码?

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

您的问题有点含糊,但我认为这是您的追求:

 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元素上使用on onchange事件扩展上述内容。

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

操作CSS:

JavaScript:

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

jQuery的:

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

小提琴

css操作的onchange示例:

http://jsfiddle.net/9L0czmeq/

就我所提供的简短描述而言,您需要根据用户在选择框中选择的值(我们将其称为事件onchange)来执行某项操作。我正在为您编写代码示例

<select onchange="somefunction($(this).val())">
 <option value="1">Option 1</option>
 <option value="2">Option 2</option>
 </select>

<script>
  function somefunction(value){
     if(value == 1){
      $("body").css("background-color","red");
     }
     if(value == 2){
       $("body").css("background-color","yellow");
     }
  }
   </script>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM