[英]Select option change css
当我单击 select 选项中的任何选项时,如何更改另一个元素的 css 注意:数据来自数据库到 select 选项
你可以在 javascript 中做到这一点,
const yourSelector = document.getElementById('yourSelector');
yourSelector.addEventListener('change', () =>
document.querySelector(yourAwesomeElement).style..... // whatever you want
)
当您单击选择器的任何选项时,此代码将更改另一个元素的 css。
我的建议如下: value="@item.QuestionTypeId" 我设置为 1,2,3,4
<select name="Questions2TypeId" id="questtype">
<option selected="selected" disabled>-- Select --</option>
@foreach (var item in ViewBag.questtype)
{ <option value="@item.QuestionTypeId">@item.QuestionOpenorClose</option> }
</select>
<p >Click to see the effect.</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$('#questtype').change(function() { //change click to change color
if ( $("option:selected", this).is(':selected')) { //check which option is selected
var optionValue = $("option:selected").attr('value');
if(optionValue == 1) {
$('p').attr('style','color:blue;')
}
if(optionValue == 2) {
$('p').attr('style','color:red;')
}
if(optionValue == 3) {
$('p').attr('style','color:pink;')
}
if(optionValue == 4) {
$('p').attr('style','color:green;')
}
}
})
</script>
结果:
[注意] 你可以参考: .addClass() .removeClass()使用 $( "p" ).addClass( ); 或 $( "p" ).removeClass( ) 根据你设置的 class 样式。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="type">
<option value="item0">--Select an Item--</option>
<option value="item1">item1</option>
<option value="item2">item2</option>
<option value="item3">item3</option>
</select>
<select id="size">
<option value="">-- select one -- </option>
</select>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.