Select a random option from the dropdown menu

I have the following script:


    <script>
    function $(id) {
        return document.getElementById(id);
    }
    
    function getImage() {

        $('loader').src='/misc/images/loading.gif';
        var url = "http://mousecreator.com/";

        // outfit
        var head = "&head="+$('head').value;
        var ears = "&ears="+$('ears').value;
        var eyes = "&eyes="+$('eyes').value;
        var mouth = "&mouth="+$('mouth').value;
        var neck = "&neck="+$('neck').value;
        var ears = "&ears="+$('ears').value;
        var hair = "&hair="+$('hair').value;
        var fur = "&fur="+$('fur').value;
        var tail = "&tail="+$('tail').value;

        // sham
        if(document.sh.sham.checked)
            var sham = "&sham=1";
        else
            var sham = "";
        
        var murl = url +"mouse.php?" + head + ears + eyes + mouth + neck + ears + hair + fur + tail + sham;

        // set the preview image and text box
        $('prem').src=murl;
    }

    function remLoad() {
        $('loader').src="";
    }</script>

<select id="head">
    <option value="235">Value 1</option>
    <option value="324">Value 2</option>
    ...
    ...

<button onclick="getImage()">Generate</button>

Is there a way to create a button that will randomly select ids from all the drop-down lists at once when the Generate button is clicked? Each id (head, ears, eyes, etc.) has its own dropdown list.

Thank you in advance!

Answer №1

function getRandomItemFromArray(arr) {
    return arr[Math.floor(Math.random() * arr.length)];
}

function getRandomOptionFromDropdown(select) {
    return getRandomItemFromArray(select.options);
}

var randomEyeColor = getRandomOptionFromDropdown($('#eyes')[0]).value;

You have the option to modify the getRandomOptionFromDropdown function to accept jQuery objects or selectors.

function getRandomOptionFromDropdown(select) {
    return getRandomItemFromArray($(select)[0].options);
}

Then you can use it in the following ways:

getRandomOptionFromDropdown($('#eyes')).value;

or

getRandomOptionFromDropdown('#eyes').value;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Create a duplicate of a div element, including all of its nested elements and associated events, using

Attempting to duplicate a div containing input fields but the event listeners are not functioning. Despite performing a deep copy in the following manner - let rows = document.querySelectorAll('.row'); let dupNode = rows[0].cloneNode(true); sh ...

Updating the state of a React component through a button click using React-JS

In my React-JS project, I am using Semantic-ui to create form inputs and a submit button. These forms have a property called 'error', and the value of this property is determined by the state. The issue arises when I click on the 'Next&apos ...

Toggle the visibility of all elements using jQuery by creating multiple buttons for each action

I have a group of 4 buttons that control the visibility of images on the page. Each button toggles between showing and hiding all images when clicked. When a button is clicked, it changes its text from "HIDE ALL" to "DISPLAY ALL." The issue I'm facin ...

What is the process of creating and customizing popovers in Bootstrap 5 with jquery?

Is there a way to dynamically create and add content to Bootstrap 5 popovers using JavaScript or jQuery? In Bootstrap 3, I used the following method: $('#element').popover({ placement : 'left', trigger : 'focus', html: true } ...

How can I dynamically modify the class name of a specific element generated during an iteration in React when another element is clicked?

My goal is to dynamically add a class to a specific element within a table row when a user clicks a remove button. The desired behavior is to disable the entire row by adding a "removed" class to the containing row div. The challenge is that there are mult ...

"Create a dynamic entrance and exit effect with Tailwind CSS sliding in and out from

My goal is to create a smooth sliding animation for this div that displays details of a clicked project, transitioning in and out from the right side. This is my attempt using Tailwind CSS: {selectedProject !== null && ( <div classNam ...

In Vue, the concept of using the debounce method is not clearly defined

I am aware that using the arrow syntax for a method can cause 'this' to not be mapped to the Vue instance. In my case, I am utilizing lodash.debounce and I don't think I'm using the arrow syntax here? Encountering Error: Cannot read pr ...

Spacing issues while utilizing the <textarea> element

<tr> <td> <b>Escalation: </td></b> <td> <TextArea name='escalation' onKeyDown=\"limitText(this.form.escalation,this.form.countdown,100);\" onKeyUp=\"limitText ...

Issue encountered while attempting to parse JSON data

I've been dealing with JSON data in Django view and parsing it in JavaScript to extract the necessary information. This is a snippet from my view.py file (Django) ibms = [] for i in range(2, 5): ibm = Mapa(i, wsMapa) ibms.append(ibm.__dict__) ...

What is the correct process for authenticating requests from SSR to the Feathers JS API?

There are some examples available on how to access FeathersJS API from SSR, but the important aspect of authorizing such requests is missing. Is it feasible to create a feathers-client app for each request? Wouldn't that put too much load on the syste ...

What could be the reason for the Mongoose findAll function causing a 500 error to occur?

My model / Schema has a working create method, but the "all" method is causing a 500 error. var mongoose = require('mongoose'); var Schema = mongoose.Schema; var DiSchema = new mongoose.Schema({ name: { type: String, lowercase: true , require ...

Utilizing AngularJS to iterate through an array of dictionaries

Within a specific section of my HTML code, I am initializing a scope variable like this: $scope.my_data = [ { c1: "r1c1", c2: "r1c2", c3: "r1c3", ...

Tips for implementing a settimeout function in a VUEJS script

I'm currently working on my first Vue.js application and I'm facing an issue with the initial data upload in the script. After modifying the data received from a database call, I encounter an error during the page's initial load which resolv ...

How come I'm not receiving an error message when I enter an incorrect email or password?

Whenever I try to log in with the wrong password and email, no error message is displayed. Instead, it simply logs me in and takes me to the main page. Can someone please assist me in implementing an error message display for incorrect login details? imp ...

"Utilizing Javascript to create a matrix from a pair of object arrays

Attempting to transform an infinite number of arrays of objects into a matrix. height: [1,3,4,5,6,7] weight: [23,30,40,50,90,100] to 1 23 1 30 1 40 1 50 ... 3 23 3 30 3 40 ... Essentially mapping out all possible combinations into a matrix I experime ...

Creating a Dropdown Filter using Vanilla JavaScript

I am currently working on a project for one of my college courses, which involves creating a dropdown list filter using pure JavaScript to filter a grid of images in HTML/CSS. The main challenge I am facing is that this filter needs to be able to work with ...

Success function in Classic ASP with Ajax Form isn't functioning properly, but the complete function is working fine

When using Ajax and JS/Jquery, I am attempting to send a basic Contact form to a Classic ASP (aspemail) without reloading the page. <form id="form-submit" action="ASPEmail.asp" method="post"> Name<br> <input id="name" type="text"&g ...

Instructions for transferring an email attachment to a collaborative drive stored in a Google Sheets document

At the moment, I am utilizing a Google script that runs periodically on my Gmail account to retrieve all attachments labeled according to certain criteria. The issue arises when trying to access attachments within a folder located on a shared drive using t ...

How can the color of the wishlist icon be modified in Reactjs when the item is available in the database?

Is there a way to change the color of the wishlist icon based on whether the item is in the database? If the item is present, its color should be brown, and if it's not present, the color should be black. Additionally, I want the ability to toggle be ...

"Uncaught ReferenceError: $ is not defined in a JavaScript/Vue.js

Currently, I am working on the javascript/vue.js page found at this link. In this file, I have added the following code: $(document).ready(function() { myIP(); }); function myIP() { $.getJSON("//freegeoip.net/json/?callback=?", function(data) { / ...