Click here to Skip to main content
15,942,292 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I am trying to populate a dropdown option for a SweetAlert alert by passing an array or string list from my MVC controller to view.

I can get the values to populate in the dropdown but when the text is selected it only returns the value such as 0 and will not return the text. Which is meaningless.

I have tried passing it in a two-dimensional array so I was setting the value and text but that didn't display right. I have also tried passing a directory but I was not able to get that to parse in my Jquery.

Sorry if this is something very obvious


What I have tried:

JavaScript
var inputOptionsPromise = obj.Attatchments;
            alert(inputOptionsPromise);

        Swal.fire({
            title: 'Select Attatchment for Upload',
            input: 'select',
            inputOptions: inputOptionsPromise,
            inputPlaceholder: 'Select an attatchment',
            showCancelButton: true,
            inputValidator: (value) => {
            return new Promise(function (resolve, reject) {
              if (value !== '') {
                resolve();
              } else {
                resolve('Select an attatchment');
              }
            });
          }
        }).then(function (result) {
          if (result.isConfirmed) {
// trying to get text value
              alert(result.value);
              alert(result.text);
              alert(result);

          }
        });

C#
//Controller
string[,] array2D = new string[,] { { "text.pdf","text.pdf"}, { "test.txt", "test.txt" } };
                                //string[] array = new string[] { "text.pdf", "test.txt" };

return Json(JsonConvert.SerializeObject(new { Success = false, File = fileStream, Attatchments = array2D , ErrorMessage = "" }), JsonRequestBehavior.AllowGet);
Posted
Updated 28-Feb-22 1:43am

1 solution

SweetAlert2 gives you a working code example that shows you how: SweetAlert2 - a beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes[^] - look at the Select (as per their example):
JavaScript
const { value: fruit } = await Swal.fire({
  title: 'Select field validation',
  input: 'select',
  inputOptions: {
    'Fruits': {
      apples: 'Apples',
      bananas: 'Bananas',
      grapes: 'Grapes',
      oranges: 'Oranges'
    },
    'Vegetables': {
      potato: 'Potato',
      broccoli: 'Broccoli',
      carrot: 'Carrot'
    },
    'icecream': 'Ice cream'
  },
  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.fire(`You selected: ${fruit}`)
}
 
Share this answer
 
Comments
Member 14125980 28-Feb-22 8:36am    
Hi Graeme

I have tried this solution but it returns oranges and not Oranges.
So in my case when i am passing the inputs it will be something like inputOptions: { 0: "File1.pdf", 1: "File2.pdf"}

When the user is selecting the option from the drop-down it then returns 0 not "File1.pdf". So i need to either be able to pass inputOptions: { "File1.pdf": "File1.pdf", "File2.pdf": "File2.pdf"} from the controller or select the text value from the drop down
Graeme_Grant 28-Feb-22 16:23pm    
If you use the browser developer tools and look at the html generated by the lib you can see what is happening:
HTMLCopy Code
<option value="oranges">Oranges</option>

As you can see above, SA2 will return oranges when the user selects Oranges. value="oranges" is the return type.

You can read more about how the Select Option works: <option>: The HTML Option element - HTML: HyperText Markup Language | MDN[^]

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900