t4t5 / sweetalert

A beautiful replacement for JavaScript's "alert"
https://sweetalert.js.org
MIT License
22.4k stars 2.84k forks source link

Select list using content object - Confusing! #835

Open andrew-za opened 6 years ago

andrew-za commented 6 years ago

I am looking to add HTML to the "content" part of the sweetalert. Current needs is just to add a select element.

Your docs point me to the content object, and shows an example of a input element.

How do you add a bit more complex elements like a select box and how to add what ever HTML I like to the sweetalert? -- something like this is a must...

mateo9 commented 5 years ago

my solution..

var value;
const select = document.createElement('select');
 select.className = 'select-custom'
 const option1 = document.createElement('option');
 const option2 = document.createElement('option');
 const option3 = document.createElement('option');

option1.innerHTML = Option 1';
option1.value = "1"
option2.innerHTML = 'Option 2';
option2.value = "2"
option3.innerHTML = 'Option 3 ';
option3.value = "3"

select.appendChild(option1);
select.appendChild(option2);
select.appendChild(option3);

select.onchange = function selectChanged(e) {
  value = e.target.value
}

swal({
  content: {
    element: select,
  }
}).then(function() {
  //whatever
})
}

`

keep in mind i am new in js, so probably this is not best solution