js --基础随机设置下拉框中的选项，获取文本框的值

<!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>

上面的内容是获取下来框的值并且以|隔开，效果如下

文本框通过设置

js --基础随机设置下拉框中的选项，获取文本框的值

猜你喜欢