我有以下代码:
select option:disabled:checked {
color: grey;
}
<select>
<option selected disabled>Initial Option</option>
<option>One</option>
<option>Two</option>
</select>
它确实成功地选择了正确的元素。但是,问题是:我想在选中时更改禁用选项文本的颜色(这是我们第一次加载页面时)。目前,当我在下拉列表选择列表中选择另一个选项时,我只能看到我应用的grey
颜色。我希望首选的颜色为grey
,表示用户仍然需要选择其他选项。我怎样才能做到这一点?
这是我对你的问题的想法,试试这个
$(document).ready(function(){
$('#MySelect').val('Zero').change();
});
$('#MySelect').on('change',function(){
$($(this)).css("color", $(this).find("option").css('color','black'));
var color = $(this).find("option[value="+$(this).val()+"]").attr('optioncolor');
$($(this)).css("color", color);
$($(this)).css("color", $(this).find("option[value="+$(this).val()+"]").css('color',color));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="MySelect">
<option value="Zero" selected optioncolor="red" >Zero</option>
<option value="One" optioncolor="green">One</option>
<option value="Two" optioncolor="yellow">Two</option>
</select>
试试这个 :
.checked {
color:green
}
<select>
<option style="color:grey">Initial Option</option>
<option class="checked">One</option>
<option class="checked">Two</option>
</select>
我添加了jQuery来为所选选项添加类。试试这个:
function selectOption() {
var x = $('#select-dropdown').val()
$('#select-dropdown option[value='+ x+']').attr("selected", true).attr("disabled", true)
}
select option:disabled:checked {
color: grey;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select-dropdown" onChange="selectOption()">
<option selected disabled>Initial Option</option>
<option value="One">One</option>
<option value="Two">Two</option>
</select>