Question

我创建了一个包含两个包含各种值的下拉菜单的页面。现在我想添加一个“随机化”按钮。单击时，此按钮将在两个字段中随机选择任何值。（这些值也会复制到每个菜单上方的框中）。

到目前为止，当用户选择菜单时，我已经对菜单和单词显示在它们上面的框中。但是现在我正在尝试添加一个随机按钮，该按钮可以将下拉列表中的任何值设置为选中状态，当然也会显示在上面的文本框中。理想情况下，下拉菜单中的更多值会偶尔添加，而不会使脚本功能失效......理想情况下，它将全部包含在HTML文件中（调用JQuery或javascript就可以了）。

我看过this，但不适用。

我也看了this，但这并不是用户激活的功能。

非常感谢有人可以提供帮助！感谢

Answer 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>

使用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);

我为你创造了这个小提琴...... https://jsfiddle.net/s59g8vdp/

Answer 2

这将创建随机数并单击随机div菜单：

    $(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();

}

小提琴示例：link

或者您可以使用此示例将值放入菜单或任何您想要的位置：link 2

Answer 3

只是一个如何制作

的概念

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

DEMO FIDDLE

Answer 4

您提供的first example非常接近您想要做的事情。你只需要：

在random和0之间获得options.length - 1值。
获取option[random]并将其selected属性设置为true。
将该选项的.innerHTML或.value复制到下拉列表顶部标签的.innerHTML或.value。

这就是你可能需要的全部：

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 看...;）我希望这能解决你的问题！

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);

如何添加适用于两个下拉菜单的“随机”按钮

5 个答案: