how can I change the css of another element when I click any option in the select option Note : The data comes from the database into the select option
You can do that in javascript,
const yourSelector = document.getElementById('yourSelector');
yourSelector.addEventListener('change', () =>
document.querySelector(yourAwesomeElement).style..... // whatever you want
)
this code will change the css of another element when you will click on any option of the selector.
My suggestion is below: value="@item.QuestionTypeId" that I set as 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>
Result:
[Note] You can refer to: .addClass() .removeClass()to use $( "p" ).addClass( );or $( "p" ).removeClass( ) according to your class set in style.
<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>