>禁用属性正在动态添加到我的下拉列表中。如何在不删除禁用属性的情况下将焦点设置为下拉列表。是否可以设置焦点？设置焦点的目的是让屏幕阅读器读取下拉列表，并让用户知道它是一个禁用的下拉列表。
我尝试使用只读属性，但它不适用于下拉列表。下面是下拉菜单的 html：
<select name="description" id="description" disabled="disabled" class="disabledSelection largeGroup">
<option selected="selected" value="-1">Select One</option>
<option value="1">Montana</option>
<option value="2">Utah</option>
</select>
我的另一个问题是我的下拉列表有 3 个选项，如何删除其中 2 个选项，但根据某些条件默认选择的选项除外(如果下拉列表被禁用，则仅显示默认值(。我正在使用下面的jQuery代码，但它不起作用。
$('#description').each(function () {
if ($(this).is('select')) {
$('option', this).not(':Selected').remove();
}
});
当disabled属性存在时，您无法执行任何操作。
但是，如果您在给定时间记录select状态(选择了哪个option(，则可以像下面这样冻结它：
$(document).ready(function(){
var myotherCondition = false;
var selectedOptions = [];
// Get the selected indexes in an array.
for (i=0;i<$("select").length;i++){
selectedOptions.push( $("select").eq(i)[0].selectedIndex );
}
console.log( JSON.stringify(selectedOptions) );
$("select").on("change",function(){
// If the other condition is fulfilled, this is a normal select behaviour.
if(myotherCondition){
console.log("Change accepted.");
// If the other condition is NOT fulfilled, drop list opens... But changes don't stay.
}else{
console.log("Change not accepted, sorry.");
var thisEQ = $(this).index();
$(this).find("option").prop("selected",false);
$(this).find("option").eq(selectedOptions[thisEQ]).prop("selected",true);
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="description" id="description" class="disabledSelection largeGroup">
<option selected="selected" value="-1">Select One</option>
<option value="1">Montana</option>
<option value="2">Utah</option>
</select>关于您关于删除未选择选项的第二个问题，这很简单：
$(document).ready(function(){
$('option').not(':selected').remove();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="description" id="description" class="disabledSelection largeGroup">
<option selected="selected" value="-1">Select One</option>
<option value="1">Montana</option>
<option value="2">Utah</option>
</select>如前所述，您不能为此使用"disabled"属性。但是，这可以很容易地完成，而无需存储以前的值。
此代码段将禁用单击下拉列表，并阻止通过按键进行更改，同时仍允许用户跳入和跳出。
// Set aria-disabled to true in order to signify to screen readers that the control is unavailable
$('#description').attr('aria-disabled', 'true');
// Disable clicking on the control
$("#description").on('mousedown', function (e) {
e.preventDefault();
});
// Disable changing the value via keyboard
$("#description").on('keydown', function (e) {
var keycode = (event.keyCode ? event.keyCode : event.which);
// Only disable if the keycode is not TAB
if (keycode != 9)
e.preventDefault();
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="description" id="description">
<option selected="selected" value="-1">Select One</option>
<option value="1">Montana</option>
<option value="2">Utah</option>
</select>至于问题的第二部分，从特定下拉列表中删除除所选选项之外的所有选项的正确方法是执行以下操作：
$('#description').find('option').not(':selected').remove();<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="description" id="description">
<option selected="selected" value="-1">Select One</option>
<option value="1">Montana</option>
<option value="2">Utah</option>
</select>晚了，但我希望这仍然有帮助。 您可以使用aria-disabled属性而不是disabled，并且您的元素将能够被分配焦点(即使在IE和移动设备中，通常此问题在Chrome或Edge中不会出现(。
作为旁注，如果你还希望你的元素可以使用键盘TAB导航，当然要确保设置tabindex="0"(但是通过JavaScript以编程方式分配焦点不需要这样做(。