0

我需要向具有两个easydropdowns的页面添加一些功能，基本上我所有的下拉菜单都由以下方式初始化：

easydropdown.all({
    behavior: {
        liveUpdates: true,
        useNativeUiOnMobile: false
    }
});

我现在需要编辑其中一个，这样当用户在那里选择一个特定值时，我会在第二个 easydropdown 中添加一个额外的选项。

到目前为止，这就是我得到的：

    easydropdown('#first_dropdown select', {
    callbacks: {
        onSelect: value => {
            selector = $('#second_dropdown select')
            if(value == 'enable extra value on the second dropdown') {
                newOption = selector.find('option:last').clone();
                newOption.text('extra value');
                selector.append(newOption);
            } else {
                selector.find("option:contains(extra value)").remove();
            }
        }
    },
    behavior: {
        liveUpdates: true,
        useNativeUiOnMobile: false
    }
});

easydropdown.all({
    behavior: {
        liveUpdates: true,
        useNativeUiOnMobile: false
    }
});

现在我有两个问题：

  • 对于我的 js 的结构方式，在该特定选择上预先激活 easydropdown 真的很难看，我非常不想编辑包含该文件的文件easydropdown.all并将回调添加到我有特定于此表单的 js 的文件中。我找不到办法。
  • 必须有更好的方法来添加额外的选项，这个解决方案有效，但它有一个小故障，如果我选择额外的选项，第一次点击它时下拉菜单会关闭选择上一个选项，以选择额外的选项我需要再次打开下拉菜单并再次选择额外选项。

有任何想法吗？

谢谢。

更新

  • 对于第一个问题，我找到了一个更令人满意的解决方案，我基本上销毁并重建了我需要更新的下拉列表的 easydropdown。

  • 我仍然无法选择最后一个结果，这是一个关于这个的小提琴

4

0 回答 0