<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <select id="sel"> <option value="请随机选择">请随机选择</option> <option value="回锅肉盖饭">回锅肉盖饭</option> <option value="宫保鸡丁">宫保鸡丁</option> <option id="op">饺子</option> <option value="炒饼">炒饼</option> <option value="地三鲜盖饭">地三鲜盖饭</option> </select> <input type="button" value="随机" id="btn"/> <script src="common.js"></script> <script> var btn = document.getElementById(‘btn‘); btn.onclick = function () { //让某个option选中 // var op = document.getElementById(‘op‘); // op.selected = true; //随机设置某个option 被选中 var sel = document.getElementById(‘sel‘) var options = sel.getElementsByTagName(‘option‘); // 1 - options.length - 1 //生成随机的索引 var index = getRandom(1, options.length - 1); //根据索引获取option options[index].selected = true; } </script> </body> </html>
以上就是我们通过按钮来随机显示下拉框值的功能。效果如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <input type="text"><br> <input type="text"><br> <input type="text"><br> <input type="text"><br> <input type="text"><br> <input type="text"><br> <input type="text"><br> <input type="text"><br> <input type="text"><br> <input type="text"><br> <input type="radio"><br> <input type="button" value="按钮" id="btn"> <script> //设置文本框中的内容 var inputs = document.getElementsByTagName(‘input‘); var i = 0, len = inputs.length; for(; i<len; i++) { //获取集合中的元素 var input = inputs[i]; //判断当前的input是否是文本框 // if (input.type === ‘text‘){ // input.value = i+1 // } if (input.type !== ‘text‘) { //不是文本框 continue; } input.value = i + 1; } //2 点击按钮获取文本框中的内容，并且用 | 分开 var btn = document.getElementById(‘btn‘); btn.onclick = function () { //找到所有文本框，获取文本框的值 var arr = []; for (i = 0; i < len; i++){ var input = inputs[i]; //判断是否是文本框 if(input.type !== ‘text‘){ continue; } arr.push(input.value); //arr[arr.length] = input.vale; } var str = arr.join(‘|‘); console.log(str); } </script> </body> </html>
上面的内容是获取下来框的值并且以|隔开，效果如下
文本框通过设置
原文：https://www.cnblogs.com/awjbky/p/12162570.html