Javascript选择随机选项

时间:2015-04-06 14:45:54

标签: javascript jquery html

我对此代码有疑问:

HTML:

<div class="select">
     <select name="ipd" id="ipd">
        <option value="1">192.168.2.1</option>
        <option value="2">192.168.2.2</option>
        <option value="3">192.168.2.3</option>
        <option value="4">192.168.2.4</option>
        <option value="5">192.168.2.5</option>
     </select>
    <a href="#" onclick="myfunction()">Select random</a>
</div>

和JavaScript:

<script type="text/javascript">
function myfunction() {
    var select = document.getElementById('ipd');
    var items = select.getElementsByTagName('option');
    var index = Math.floor(Math.random() * items.length);

    select.selectedIndex = index;
}
</script>

当我从JS中删除功能行并使代码在站点加载后运行时,它的工作正常。但是,当我尝试使用它时,它不起作用。 有人能解释一下为什么吗? 我尝试很少调试这个并向函数添加警报(索引),它返回正确的随机索引,但它没有选择任何东西。

2 个答案:

答案 0 :(得分:0)

点击链接后,您的页面将被重新加载,还会显示html。因此所有的dom变化都将丢失。您需要通过返回false来停止加载页面。

<script type="text/javascript">
function myfunction() {
var select = document.getElementById('ipd');
var items = select.getElementsByTagName('option');
var index = Math.floor(Math.random() * items.length);

select.selectedIndex = index;
return false;
}
 </script>

答案 1 :(得分:0)

您的代码工作正常......只要在创建DOM之前运行它。

JSFiddle


如果您的脚本在创建DOM后运行,并且您无法以任何理由更改它...您可以删除DOM中的onclick,在链接上添加ID并以此方式执行:

JSFiddle

document.getElementById("randomSelect").addEventListener("click", function() {
    var select = document.getElementById('ipd');
    var items = select.getElementsByTagName('option');
    var index = Math.floor(Math.random() * items.length);
    select.selectedIndex = index;
});

另外,我注意到你标记了jQuery,你也可以使用它......

JSFiddle

$(document).ready(function () {
    $("#randomSelect").click(function () {
        var select = document.getElementById('ipd');
        var items = select.getElementsByTagName('option');
        var index = Math.floor(Math.random() * items.length);
        select.selectedIndex = index;
    });
});