How to add a "random" button that applies to two drop down menus

Question

I have created a page with two drop-down menus containing various values. Now I would like to add a "randomize" button. When clicked, this button would select any of the values at random in both fields. (the values are also copied on a box above each menu).

Project idea for drop down menus

So far I've coded the menus and the words display in the boxes above them when the user selects them. But now I'm trying to add a randomise button that would put any of the values in the drop down as selected and of course displayed in the above text box. Ideally, more values in the drop-down menus would be added every once in a while without making the script dysfunctional... and ideally it would all be contained in a HTML file (calling for JQuery or javascript is ok).

I've looked at this but it doesn't apply.

I also looked at this but it's not really a feature that the user activates.

Very grateful if anyone can help! Thanks

Answer 1

hope this helps HTML :

<select id="s1">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

<select id="s2">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Javascript:

var minNumber = 0;
var maxNumber = 3;

function randomNumberFromRange(min,max)
{
    return  Math.floor(Math.random()*(max-min+1)+min);


}


$("#s2")[0].selectedIndex = randomNumberFromRange(minNumber, maxNumber);
$("#s1")[0].selectedIndex = randomNumberFromRange(minNumber, maxNumber);

I create this fiddle for you... https://jsfiddle.net/s59g8vdp/

Answer 2

This will create random number and click on random div menu:

    $(function(){
$(".menu").click(function(){
    alert("you clicked "+$(this).text());
    });
}); 

function doSomthing(){

   var rand=Math.floor((Math.random() * 5));
   alert(rand+1);
   var ele = $(".menu").get(rand);
   $(ele).click();

}

fiddle example: link

Or you can use this example to put value in the menu, or wherever you want: link 2

Answer 3

just a concept how to make that

$('input').on('click',function(){
    var randomnum = Math.floor(Math.random()*$('ul li').length);
    alert($('ul li').eq(randomnum).text());
});

DEMO FIDDLE

Answer 4

The first example you have provided is very close to what you want to do. You just need to:

1. Get a random value between 0 and options.length - 1.
2. Get option[random] and set its selected property to true.
3. Copy that option's .innerHTML or .value to the .innerHTML or .value of the label on top of the dropdowns.

This is all you probably need:

function randomizeSelect(selectId, fieldId) {

    var options = document.getElementById(selectId).children;

    var random = Math.floor(options.length * (Math.random() % 1));

    var option = options[random];
    option.selected = true;
    
    document.getElementById(fieldId).value = option.innerHTML; // You can use .value instead in both places
}

var values = {};

window.onload = function(e) {

    document.onchange = function(e) { // Event Delegation: http://davidwalsh.name/event-delegate
        var t = e.target;
        if(t.tagName == "SELECT")
            document.getElementById(t.id.replace("Select","Label")).value = t.children[t.selectedIndex].innerHTML;  
    }

    document.oninput = function(e) {
        var t = e.target;
        if(t.tagName == "INPUT") {
            if(values.hasOwnProperty(t.id))
                var options = values[t.id];
            else
                var options = document.getElementById(t.id.replace("Label","Select")).children;
        
            var currentValue = t.value;
      
            for(i in options) {
                if(options[i].innerHTML == currentValue) { // Can also use .value
                    options[i].selected = true;
                    break;
                }
            }  
        }
    }

    document.getElementById("randomize").onclick = function(e) {
        randomizeSelect("leftSelect", "leftLabel");
        randomizeSelect("rightSelect", "rightLabel");
    }
}

<input type="text" id="leftLabel" value="Left 1">

<select id="leftSelect">
  <option value="l1" selected>Left 1</option>
  <option value="l2">Left 2</option>
  <option value="l3">Left 3</option>
</select>

<input type="text" id="rightLabel" value="Right 1">

<select id="rightSelect">
  <option value="r1" selected>Right 1</option>
  <option value="r2">Right 2</option>
  <option value="r3">Right 3</option>
</select>

<button id="randomize">RANDOMIZE</button>

Answer 5

Randomize Button added see... ;) i hope this solve your problem!

https://jsfiddle.net/s59g8vdp/1/

Html :

<select id="s1">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

<select id="s2">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

<a id="randomize" href="#">randomize</a>

Javascript :

var minNumber = 0;
var maxNumber = 3;

$("#randomize").click(function(){
    $("#s2")[0].selectedIndex = randomNumberFromRange(minNumber, maxNumber);
$("#s1")[0].selectedIndex = randomNumberFromRange(minNumber, maxNumber);
});

function randomNumberFromRange(min,max)
{
    return  Math.floor(Math.random()*(max-min+1)+min);


}


$("#s2")[0].selectedIndex = randomNumberFromRange(minNumber, maxNumber);
$("#s1")[0].selectedIndex = randomNumberFromRange(minNumber, maxNumber);