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

debugcn 发表于 Dev

微机

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

到目前为止，我已经对菜单进行了编码，并且当用户选择菜单时，单词将显示在菜单上方的框中。但是，现在我试图添加一个随机化按钮，该按钮会将所有的值放置在下拉菜单中，并显示在上面的文本框中。理想情况下，会不时地在下拉菜单中一次添加更多的值，而不会使脚本运行不正常...并且理想情况下，所有这些值都将包含在HTML文件中（可以调用JQuery或javascript）。

我看了这个，但它并不适用。

我也查看了此内容，但这并不是用户激活的功能。

非常感谢任何人的帮助！谢谢

丹吉格

您提供的第一个示例与您要执行的操作非常接近。您只需要：

获取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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。