Javascript Sweetalert 2同时选择下拉列表和文本区域
我想知道是否有可能允许选择下拉列表和输入文本区在同一个甜警报 例如:“我的选择列表”有4个选项,最后一个选项是“其他”。我想当用户选择其他人时,它会显示一个文本区域供用户输入。我使用的是类似于sweetalert 2的功能,如下所示Javascript Sweetalert 2同时选择下拉列表和文本区域,javascript,sweetalert2,Javascript,Sweetalert2,我想知道是否有可能允许选择下拉列表和输入文本区在同一个甜警报 例如:“我的选择列表”有4个选项,最后一个选项是“其他”。我想当用户选择其他人时,它会显示一个文本区域供用户输入。我使用的是类似于sweetalert 2的功能,如下所示 swal({ title: 'Select field validation', input: 'select', inputOptions: { 'apples': 'Apples', 'bananas': 'Bananas', 'g
swal({
title: 'Select field validation',
input: 'select',
inputOptions: {
'apples': 'Apples',
'bananas': 'Bananas',
'grapes': 'Grapes',
'Others': 'Others'
},
inputPlaceholder: 'Select a fruit',
showCancelButton: true,
inputValidator: (value) => {
return new Promise((resolve) => {
if (value === 'oranges') {
resolve()
} else {
resolve('You need to select oranges :)')
}
})
}
})
if (fruit) {
swal('You selected: ' + fruit)
}
一种可能的方法(如果您想继续使用input
和inputValidator
)是,您可以使用swal的html
属性添加隐藏的文本输入(例如,使用display:none
):
},
这方面的一个例子可以在
请注意,在这种情况下,您应该使用预确认
来处理swal的状态,并在需要时返回文本输入的值(请参见上面url中示例的来源)查看
html: '<input type="text" id="fruit-text" class="swal2-input" style="display: none;">',
onBeforeOpen: (dom) => {
swal.getInput().onchange = function (event) {
if (event.target.value === "Others") {
dom.querySelector('#fruit-text').style.display = 'initial'
} else {
dom.querySelector('#fruit-text').style.display = 'none'
}
}