选择选项更改 css答案

【问题标题】：Select option change css选择选项更改 css
【发布时间】：2022-01-15 12:51:36
【问题描述】：

当我单击选择选项中的任何选项时，如何更改另一个元素的 css 注意：数据来自数据库进入select选项

【问题讨论】：

【解决方案1】：

你可以在javascript中做到这一点，

const yourSelector = document.getElementById('yourSelector');
yourSelector.addEventListener('change', () => 
   document.querySelector(yourAwesomeElement).style..... // whatever you want
)

当您单击选择器的任何选项时，此代码将更改另一个元素的 css。

【讨论】：

我无法添加 id，因为我的选项来自数据库
这边
好吧，这里的 id 将是选择器的 id，所以它将是 questtype

【解决方案2】：

我的建议如下： 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()根据你在style中设置的class使用$("p").addClass();或者$("p").removeClass()。

【讨论】：

【解决方案3】：

<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>

【讨论】：