jquery - 如何将焦点设置在禁用的下拉列表上

Question

禁用属性正在动态添加到我的下拉列表中。如何在不删除禁用属性的情况下将焦点设置为下拉列表。可以设置焦点吗？设置焦点的目的是让屏幕阅读器读取下拉列表并让用户知道这是一个禁用的下拉列表。

我尝试使用只读属性，但它在下拉列表中不起作用。下面是下拉菜单的 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();
  }  
});

Answer 1

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