【问题标题】:Using math.random in button to set a select option?在按钮中使用 math.random 设置选择选项?
【发布时间】:2015-08-02 10:40:51
【问题描述】:

我正在尝试制作一个在单击时随机设置选择选项的按钮。虽然我不知道我做错了什么......

http://jsfiddle.net/GamerGorman20/nw8Ln6ha/25/

$('#rand').click(

        function() {
            randNum();
            var num = "";
            document.getElementById("mySelect").value.innerHTML = favWebComics[num];
    });

    var randNum = function() {
        num = Math.round(Math.random() * 2) + 1;
        return num;
    };

显示的代码只是链接的 jsfiddle 中较大脚本的一小部分。

我计划稍后添加更多选择,但我想在花时间研究这些之前弄清楚代码。

值得一提,我对此的理解非常有限,因此非常感谢保持建议的简单性。

【问题讨论】:

  • 你不能设置这样的选择的innerHTML。

标签: javascript jquery select button random


【解决方案1】:

您需要更改的代码的相关部分在完成后将如下所示(请参阅更新后的jsfiddle):

$('#rand').click(function() {
    var $select = document.getElementById('mySelect'),
        max = $select.getElementsByTagName('option').length - 1;

    $select.selectedIndex = randNum(1, max);
    myFunction();
});

var randNum = function(min, max) {
    num = Math.floor(Math.random() * (max - min + 1)) + min;
    return num;
};

var myFunction = function() {
    var x = document.getElementById("mySelect").value;

    document.getElementById("demo").innerHTML = "You selected: " + x;
    document.getElementById("image").innerHTML = favWebComics[x][1];
    document.getElementById("web").innerHTML = favWebComics[x][0];
    document.getElementById("tags").innerHTML = "Tags: " + favWebComics[x][2];
};

我没有更改您代码的样式或结构,只是更改了一些基本属性。

你遇到的问题是innerHTML。您不能在元素的value 上设置innerHTML

相反,您可以生成一个随机数并将select 元素的selectedIndex 属性设置为该随机数。

然后,您将调用显示您需要的图像和其他内容的函数。

【讨论】:

    【解决方案2】:

    您不能像这样将select 更改为innerHTML

    document.getElementById("mySelect").value.innerHTML = favWebComics[num];
    

    您必须改为更改值,然后像这样应用更改

    $("#mySelect").val("New text").change();
    

    $("#mySelect").prop('selectedIndex', index).change(); 
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-10-31
      • 1970-01-01
      • 1970-01-01
      • 2017-11-19
      • 2023-03-17
      • 2021-03-08
      相关资源
      最近更新 更多