Question

我有一个常规组合框，我正在收听更改事件并将所选值粘贴到html表中。这一切都很好，但有一个问题。现在，用户可以多次选择相同的项目（我不想允许）。

在选择项目的位置，我想：

捕获值并将其粘贴在表格中（我现在正在做，代码在下面）

<script type="text/javascript">
    $(document).ready(function() {
    $('#categories').change(function() {
        if (this.selectedIndex != 0) {
            addRowToTable(this.value);
        }
    });
}

我想知道如何做下面的＃2和＃3。

将selectedindex重置为0（表示“请选择。”）
不允许再次选择该选择（以及禁用该下拉项目时的任何直观表示）。

Answer 1

1号非常简单：

$('#categories option:first').get(0).selectedIndex = 0;

您也可以在下拉列表中使用选项的值，如下所示：

$('#categories').val('myOptionValue');

为了防止第二次选择某个项目，我会将其从下拉列表中删除，如下所示：

$('#categories option[value=valueToRemove]').remove();

Answer 2

cballou的答案在select元素上设置@ rel =“disabled”，这会导致“单选允许错误”。

我会调整它看起来像下面的代码。另外，我建议设置一个类而不是使用rel属性。这样您就可以添加样式（浏览器允许），向用户指示该选项已被禁用。

CSS：

#categories .disabled {background：#c00; }

JS：

   $(document).ready(function() {
        $('#categories').change(function() {
            var selectedIndex = this.selectedIndex,
                selection;
           if ( selectedIndex !== 0 ) {
                selection = $(this.options[selectedIndex]);
                if( !selection.hasClass('disabled') ) {
                    addRowToTable(this.value);
                    selection.addClass('disabled');
                }
           }
          // reset selected index
          $(this).val('');
        });
   });

Answer 3

您可以在该选项中添加rel="disabled"属性并按如下方式检查：

$(document).ready(function() {
    $('#categories').change(function() {
        if (this.selectedIndex != 0 && $(this).attr('rel') != 'disabled') {
            addRowToTable(this.value);
            $(this).attr('rel', 'disabled');
        }
    });
});

如果你的第一个选项（selectedIndex 0）有一个空值，你可以像这样轻松重置：

$(document).ready(function() {
    $('#categories').change(function() {
        if (this.selectedIndex != 0 && $(this).find('option:selected').attr('rel') != 'disabled') {
            addRowToTable(this.value);
            $(this).find('option:selected').attr('rel', 'disabled');
        }
        // reset selected index
        $(this).val('');
    });
});

Answer 4

好吧，如果我是你，我不会使用下拉框...我将使用多个<select multiple="true">，这将允许您使用ctrl +单击一次选择多个项目（cmd +点击mac），然后我会有一个添加按钮完成后单击。这会触发js taht会抓住你在桌面上放置em的所有选项或你有什么然后从选择框中删除它们。

http://www.w3schools.com/TAGS/att_select_multiple.asp

如何在选择下拉项后禁用它

4 个答案: