Question

我对此代码有疑问：

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中删除功能行并使代码在站点加载后运行时，它的工作正常。但是，当我尝试使用它时，它不起作用。有人能解释一下为什么吗？我尝试很少调试这个并向函数添加警报（索引），它返回正确的随机索引，但它没有选择任何东西。

Answer 1

点击链接后，您的页面将被重新加载，还会显示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>

Answer 2

您的代码工作正常......只要在创建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;
    });
});

Javascript选择随机选项

2 个答案: