What is the best way to select a random item from a DropDownList using JavaScript?

Question

What is the best way to select a random item from a DropDownList using JavaScript?

I am looking to automate the process of selecting random items from a dropdown list. Currently, it is selecting items in order from first to last, but I would like it to select items randomly.

/* function to automatically select items from DropDownList1 */
function selectFromDropdown(selector, text) {
  $(selector).find('option').each(function() {
    if ($(this).text() == text) {
      $(selector).val($(this).val());
      return false;
    }
  })
}

$(document).ready(function() {
  let numberOfTimes = 0;
  const time = 1000 //3s
  let values = [];
  $('#DropDownList1').find('option').each(function() {
    values.push($(this).text())
  });
  console.log(values);
  const interval = setInterval(function() {
      selectFromDropdown('#DropDownList1', values[numberOfTimes])
      if (numberOfTimes == values.length - 1) {
        clearInterval(interval);
      } else {
        numberOfTimes = numberOfTimes + 1;
      }
    },
    time);
});

To see the code in action, visit: https://jsfiddle.net/lucasangelo_/17Lgr0kc/6/

javascript asp.net webforms

Answer 1

Answer №1

If you're looking to retrieve random values from a dropdown selection, you can make use of the following function:

function fetchRandomValuesFromDropdown(selector, amount)
{
    var chosenValues = [];
    var dropdownChildren = document.getElementById(selector).children;

    for (var i = 0; i < amount; i++) {
        var randomNumber = Math.floor(Math.random() * dropdownChildren.length);
        var randomOptionChosen = dropdownChildren[randomNumber];

        if (chosenValues.indexOf(randomOptionChosen.value) < 0) {
            chosenValues.push(randomOptionChosen.value);
        } else {
            i--;
        }
    }

    return chosenValues;
}

You can then invoke it as follows:

fetchRandomValuesFromDropdown("DropDownList1", 3);

Answer 2

If you're looking to retrieve random values from a dropdown selection, you can make use of the following function:

function fetchRandomValuesFromDropdown(selector, amount)
{
    var chosenValues = [];
    var dropdownChildren = document.getElementById(selector).children;

    for (var i = 0; i < amount; i++) {
        var randomNumber = Math.floor(Math.random() * dropdownChildren.length);
        var randomOptionChosen = dropdownChildren[randomNumber];

        if (chosenValues.indexOf(randomOptionChosen.value) < 0) {
            chosenValues.push(randomOptionChosen.value);
        } else {
            i--;
        }
    }

    return chosenValues;
}

You can then invoke it as follows:

fetchRandomValuesFromDropdown("DropDownList1", 3);

Answer 3

Answer №2

The solution has been provided:

  /* utility function to automatically choose options from a dropdown list */
    function pickItemFromDropdown(selector, text) {
      $(selector).find('option').each(function() {
        if ($(this).text() == text) {
          $(selector).val($(this).val());
          return false;
        }
      })
    }

    function generateRandomNumber(min, max) {
      return (Math.random() * (max - min) + min).toFixed(0);
    }

    $(document).ready(function() {
      let counter = 0;
      const timeBetweenCalls = 1000 //3s
      let values = [];
      $('#DropDownList1').find('option').each(function() {
        values.push($(this).text())
      });
      console.log(values);

      const interval = setInterval(function() {
          const randomNumber = generateRandomNumber(0, values.length - 1);
          const randomItem = values[randomNumber];
          //console.log(randomItem);
          pickItemFromDropdown('#DropDownList1', randomItem),
            console.log(`${counter} - Made a PostBack call for ${randomItem}`);
          //__doPostBack('LButton3', 'OnClick');
          if (counter == values.length - 1) {
            console.log("Iterated through all items, clear the setInterval");
            clearInterval(interval);
          } else {
            counter = counter + 1;
          }
        },
        timeBetweenCalls);
    });

Appreciate your help!

Answer 4

The solution has been provided:

  /* utility function to automatically choose options from a dropdown list */
    function pickItemFromDropdown(selector, text) {
      $(selector).find('option').each(function() {
        if ($(this).text() == text) {
          $(selector).val($(this).val());
          return false;
        }
      })
    }

    function generateRandomNumber(min, max) {
      return (Math.random() * (max - min) + min).toFixed(0);
    }

    $(document).ready(function() {
      let counter = 0;
      const timeBetweenCalls = 1000 //3s
      let values = [];
      $('#DropDownList1').find('option').each(function() {
        values.push($(this).text())
      });
      console.log(values);

      const interval = setInterval(function() {
          const randomNumber = generateRandomNumber(0, values.length - 1);
          const randomItem = values[randomNumber];
          //console.log(randomItem);
          pickItemFromDropdown('#DropDownList1', randomItem),
            console.log(`${counter} - Made a PostBack call for ${randomItem}`);
          //__doPostBack('LButton3', 'OnClick');
          if (counter == values.length - 1) {
            console.log("Iterated through all items, clear the setInterval");
            clearInterval(interval);
          } else {
            counter = counter + 1;
          }
        },
        timeBetweenCalls);
    });

Appreciate your help!

What is the best way to select a random item from a DropDownList using JavaScript?

Answer №1

Answer №2

Similar questions

Troubleshooting the Ng2-Charts Linechart to display all values instead of just the first two

Decoding the file's encoding: A beginner's guide

The persistent issue of the modal box disappearing persists, despite my efforts to remove additional instances of bootstrap.min

Tips for maintaining server session by tracking user activity on the browser using a simple ajax request to the server without relying on JQuery

Troubleshooting the "Failed to mount component" error in Vue: fixing template or render function definition issues

Tips for managing promise rejection when generating a highland stream from a promise?

What could be causing the lack of responsiveness on this page?

Guide to authoring stored procedure updates in webmatrix format?

What is preventing the successful insertion of a JSON array into a SQL database?

Preserving the top line or heading while cutting through a table

Exploring the power of internal linking with GatsbyJS

Picturing a way to paint a displaced bar within an ASP.NET Chart

Unable to locate the name 'Cheerio' in the @types/enzyme/index.d.t file

What is the best way to ensure that my multiple choice code in CSS & JS only allows for the selection of one option at a time? Currently, I am able

Despite the use of v-if and v-else directives in Vue 2, a specific component properties are not being updated while the others are updating

"Optimize your website by incorporating lazy loading for images with IntersectionObserver for enhanced performance

Explore Youtube to find the most popular video IDs

Loading data into a Dojo ItemFileReadStore using Grails and the "render as JSON" method

The issue of video tags not displaying previews on iPhone across all browsers is also accompanied by problems with controls not functioning correctly

Guide to implementing nested asynchronous calls using a foreach loop