禁用第一个选项的动态附加选择菜单会自动选择第二个选项

Question

我遇到了一个奇怪的案例,据我所知,两件应该表现相同的事情表现得完全不同.

如果我在页面上有两个选择菜单,则一个静态菜单在HTML中硬编码,一个在运行时使用JQuery附加到正文.然后我禁用两个选择菜单中的第一个选项.显示时,两个菜单的第一个选项都按预期禁用,但动态附加菜单会自动将值设置为第二个选项,而静态菜单仍然选择了第一个.

http://jsfiddle.net/hm3xgkLg/1/

HTML:

<select class="dropMenu">
  <option value="1">First</option>
  <option value="2">Second</option>
  <option value="3">Third</option>
  <option value="4">fourth</option>
</select>

使用Javascript:

var arr = [
  {val : 1, text: 'One'},
  {val : 2, text: 'Two'},
  {val : 3, text: 'Three'},
  {val : 4, text: 'Four'}
];

var sel = $('<select class="dropMenu">').appendTo('body');
$(arr).each(function() {
   sel.append($("<option>").attr('value',this.val).text(this.text));
 });
$('.dropMenu option:nth-child(1)').attr('disabled', 'disabled');

为什么这两个看似相同的选择菜单表现不同？我想两者都像静态菜单(保持第一个值选择)是可能的吗？

还应该注意我尝试在$(document).ready中包装disable函数来排除菜单没有呈现的问题但是没有变化.我还试过有两个不同的类,有两个单独的调用来禁用选项,以确保它没有以某种方式发生冲突而没有变化.

Answer 1

为什么这两个看似相同的选择菜单表现不同

这是因为第一个select已经是文档的一部分并被解析了.根据这里的规格:

初始状态选择了第一个选项..

因此第一个选项是预选的.稍后当您禁用一个选项时,它不会更改选择.

示例1:您可以看到第一个select已将disabled属性应用于标记中的第一个选项.与第二个选项相比,第二个选项被预选select.

<select class="dropMenu">
    <option value="1" disabled>First</option>
    <option value="2">Second</option>
    <option value="3">Third</option>
    <option value="4">fourth</option>
</select>
<select class="dropMenu">
    <option value="1">First</option>
    <option value="2">Second</option>
    <option value="3">Third</option>
    <option value="4">fourth</option>
</select>

在您动态添加select使用Javascript的情况下,第二个select是创建并body立即添加到.当它成为DOM的一部分时,没有选项,因此无法进行预选.稍后当你向它添加选项,然后禁用其中一个选项时,它似乎执行得太快,加载时第一个选项已被禁用,第二个选项被预先选中.

示例2:不要select立即附加到body.在options填充之后附加它.此时,option尽管您disabled稍后更改了属性,但仍会预先选择第一个.

var arr = [
  {val : 1, text: 'One'},
  {val : 2, text: 'Two'},
  {val : 3, text: 'Three'},
  {val : 4, text: 'Four'}
];

var sel = $('<select class="dropMenu">');
$(arr).each(function () {
    sel.append($("<option>").attr('value', this.val).text(this.text));
});

sel.appendTo('body'); /* <--- append here */

$('.dropMenu option:nth-child(1)').prop('disabled', true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="dropMenu">
    <option value="1">First</option>
    <option value="2">Second</option>
    <option value="3">Third</option>
    <option value="4">fourth</option>
</select>

例3:你之前添加延迟disable的option.这将为您提供获得第一个option预选的预期行为,因为它将有足够的时间.

var arr = [
  {val : 1, text: 'One'},
  {val : 2, text: 'Two'},
  {val : 3, text: 'Three'},
  {val : 4, text: 'Four'}
];

var sel = $('<select class="dropMenu">').appendTo('body');
$(arr).each(function () {
    sel.append($("<option>").attr('value', this.val).text(this.text));
});

setTimeout(disable, 1000); /* <--- give some delay here */

function disable() {
    $('.dropMenu option:nth-child(1)').prop('disabled', true);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="dropMenu">
    <option value="1">First</option>
    <option value="2">Second</option>
    <option value="3">Third</option>
    <option value="4">fourth</option>
</select>

示例4:您也可以option在禁用它们之前明确选择一个.

var arr = [
  {val : 1, text: 'One'},
  {val : 2, text: 'Two'},
  {val : 3, text: 'Three'},
  {val : 4, text: 'Four'}
];

var sel = $('<select class="dropMenu">').appendTo('body');
$(arr).each(function () {
    sel.append($("<option>").attr('value', this.val).text(this.text));
});

$('.dropMenu option:nth-child(1)').prop('selected', true); /* <-- select explicitly */
$('.dropMenu option:nth-child(1)').prop('disabled', true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="dropMenu">
    <option value="1">First</option>
    <option value="2">Second</option>
    <option value="3">Third</option>
    <option value="4">fourth</option>
</select>