禁用动态创建的下拉选择列表选项

Question

我通过使用jQuery .getJSON函数从我的数据库动态获取数据，并将数据附加到html选择下拉列表。我的JS代码如下：

$.getJSON('url',
  function(data) {
    var html = '<option value="">--Please select one--</option>';
    var len = data.length;
    for (var i = 0; i < len; i++) {
      html += '<option value="' + data[i].name + '">' + '</option>';
    }
    html += '</option>';
    $('#names').html(html);
  });

我的HTML：

<select id="names"></select>

这很好用，它在页面加载后开始如下所示：

我想要做的是在用户单击选择选项并从列表中选择一个可用选项后，我想禁用--Please select one--选项，以便强制用户选择有意义的名称不要回到--Please select one--

我在网上查了一下，我找到的只是硬编码下拉选择的解决方案。你能给点建议吗？

Answer 1

默认设置为disabled和selected - 因此，一旦用户点击下拉列表，他们必须选择一个选项：

var html = '<option value="" selected disabled>--Please select one--</option>';

Answer 2

如果你想要＆＃34;请选择一个＆＃34; tymeJV的答案是好的。明显保留的选项，但不可选择。如果您想完全删除该选项，请参阅我的回答。

当首次更改select的值时，您所要做的就是从select节点中删除第一个选项节点。由于您正在使用jQuery，因此有一种非常有效的方法可以实现此目的。

您可以做的是添加一个更改处理程序，该处理程序将在第一次更改选择值时调用，这将用于删除第一个选项：

$('#names').one('change', function(){
    $(this).find('option:first').remove();
});

jQuery one（）函数是一个在第一次调用后未绑定的处理程序，＆＃34;意味着在第一次在select元素上发生更改操作后，处理程序将不再存在。

关于one（）的更多信息：http://api.jquery.com/one/