javascript - jQuery - 在选择点击时禁用第一个选项，但保持框打开？

Question

我有一个地址选择下拉菜单，默认为 "Select your address" 。当用户单击选择框时，我希望禁用默认选项，但要让下拉菜单保持打开状态而未选择任何内容，以便用户可以从列表中进行选择。

当前行为是自动选择第二个选项并关闭下拉菜单。

let addressClickCount;

if ($("#js-address-select option").length > 1) {
  $("#js-address-select").html($("#js-address-select option")
                         .sort(function (a, b) {
        return a.text == b.text ? 0 : a.text < b.text ? -1 : 1
      }))

   const blankAddress = new Option("-- SELECT YOUR ADDRESS --")

   $("#js-address-select").prepend(blankAddress)

   $("#js-address-select").click(function() {
     if (addressClickCount === 0) {
       $(blankAddress).attr('disabled','disabled')
       $(blankAddress).prop("selected", false)
       $("#js-address-select option[value='*']").attr('selected', false)
     }

     addressClickCount++
   })
 }

 $("#js-address-select").prop("selectedIndex", 0);
}

标签： javascriptjquery

Answer 1

您真正需要做的就是禁用单击时的第一个选项。

const blankAddress = new Option("-- SELECT YOUR ADDRESS --")
$("#js-address-select").prepend(blankAddress)
$("#js-address-select option:eq(0)").prop("selected",true);
$('#js-address-select').click(function(){
  $(this).find('option:eq(0)').prop('disabled',true)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="js-address-select">
  <option>Address A</option>
  <option>Address B</option>
  <option>Address C</option>
</select>