Я пытаюсь создать цепной модал swal2 с 3 входами типа select на каждом шаге, но сейчас я получаю:
1 - 3-х шаговый модал с 1 select на каждом шаге:
Swal.mixin({
confirmButtonText: 'Next →',
showCancelButton: true,
progressSteps: ['1','2','3']
}).queue([
symbols,
{
title: 'Tipo',
text: 'Escolha o tipo da call',
inputOptions: {
BUY: 'Compra',
SELL: 'Venda'
}
},
{
title: 'Ordem',
text: 'Escolha o tipo de ordem da call',
inputOptions: {
LIMIT: 'LIMIT',
STOP: 'STOP',
STOP_LIMIT: 'STOP_LIMIT'
}
},
]).then((result) => {
if (result.value) {
const answers = JSON.stringify(result.value)
Swal.fire({
title: 'All done!',
html: `
Your answers:
<pre><code>${answers}
`, verifyButtonText: 'Прекрасно!' })}})
2 - способ делать то, что я хочу, но без возможности захвата выбранных значений:
Swal.mixin({
input: 'select',
confirmButtonText: 'Next →',
showCancelButton: true,
progressSteps: ['1','2','3']
}).queue([
{
html: '<label for="symbol"><strong>Ativo</strong></label>'+
'<select id="symbol" class="swal2-input">'+options+'</select>'+
'<label for="type"><strong>Tipo de call</strong></label>'+
'<select id="type" class="swal2-input">'+
'<option value="BUY">BUY</option>;'+
'<option value="SELL">SELL</option>;'+
'</select>'+
'<label for="order"><strong>Tipo de ordem</strong></label>'+
'<select id="order" class="swal2-input">'+
'<option value="LIMIT">LIMIT</option>;'+
'<option value="STOP">STOP</option>;'+
'<option value="STOP_LIMIT">STOP_LIMIT</option>;'+
'</select>',
},
{
html:
'<label for="entry_price"><strong>Preço de entrada</strong></label>'+
'<input id="entry_price" class="swal2-input">'+
'<label for="entry_price_deviation"><strong>Desvio máximo</strong></label>'+
'<input id="entry_price_deviation" class="swal2-input">'
},
{
html:
'<label for="take_profit"><strong>Take profit</strong></label>'+
'<input id="take_profit" class="swal2-input">'+
'<label for="stop_loss"><strong>Stop loss</strong></label>'+
'<input id="stop_loss" class="swal2-input">'
}
]).then((result) => {
if (result.value) {
console.log(result);
const answers = JSON.stringify(result.value)
Swal.fire({
title: 'All done!',
html: 'Result = ' +
[
$('#symbol').val(),
$('#type').val(),
$('#order').val(),
],
confirmButtonText: 'Lovely!'
})
}
})
3 - простой модальный с 3-мя селектами, фиксирующими их значения (но не цепочечные модальные)
const { value: formValues } = await Swal.fire({
title: 'Criar oportunidade',
html:
'<label for="symbol"><strong>Ativo</strong></label>'+
'<select id="symbol" class="swal2-input">'+options+'</select>'+
'<label for="type"><strong>Tipo de call</strong></label>'+
'<select id="type" class="swal2-input">'+
'<option value="BUY">BUY</option>;'+
'<option value="SELL">SELL</option>;'+
'</select>'+
'<label for="order"><strong>Tipo de ordem</strong></label>'+
'<select id="order" class="swal2-input">'+
'<option value="LIMIT">LIMIT</option>;'+
'<option value="STOP">STOP</option>;'+
'<option value="STOP_LIMIT">STOP_LIMIT</option>;'+
'</select>'
,
focusConfirm: false,
preConfirm: () => {
return [
document.getElementById('symbol').value,
document.getElementById('type').value,
document.getElementById('order').value
]
}
})
if (formValues) {
Swal.fire(JSON.stringify(formValues))
}