【问题标题】:Easy way to add drop down menu with 1 - 100 without doing 100 different options?在不做 100 个不同选项的情况下添加 1 - 100 个下拉菜单的简单方法?
【发布时间】:2019-01-04 13:31:18
【问题描述】:

我只是想知道是否有一个简单的快捷方式可以将选项添加到数字 1 到 100 的下拉菜单中,而不必执行以下操作:

<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>

等等。一直到100?

谢谢

【问题讨论】:

    标签: html forms


    【解决方案1】:

    恐怕不是纯 HTML。

    你可以使用一些 jQuery 来做到这一点:

    $(function(){
        var $select = $(".1-100");
        for (i=1;i<=100;i++){
            $select.append($('<option></option>').val(i).html(i))
        }
    });​
    

    -- SEE DEMO --

    你可以下载jQuery here

    【讨论】:

    • 那会很好用,我应该将它嵌入到哪种 jQuery 语言中?
    • @LukeTetrabyte 就是这样,只要它是最新的库
    【解决方案2】:

    据我所知,不是纯 HTML。

    但是使用 JS 或 PHP 或其他脚本语言(如 JSP),您可以使用 for 循环轻松完成。

    PHP 中的示例:

    <select>
    <?php
        for ($i=1; $i<=100; $i++)
        {
            ?>
                <option value="<?php echo $i;?>"><?php echo $i;?></option>
            <?php
        }
    ?>
    </select>
    

    【讨论】:

      【解决方案3】:

      除了 html,你还在使用 JavaScript 还是 jQuery?如果是,您可以执行以下操作:

      HTML:

      <select id='some_selector'></select>​
      

      jQuery:

      var select = '';
      for (i=1;i<=100;i++){
          select += '<option val=' + i + '>' + i + '</option>';
      }
      $('#some_selector').html(select);
      

      你可以see here

      兼容浏览器的另一个选项而不是选择,您可以使用 HTML5 的input type=number

      <input type="number" min="1" max="100" value="1">
      

      【讨论】:

        【解决方案4】:

        在 Html5 中,您现在可以使用

        <form>
        <input type="number" min="1" max="100">
        </form>
        

        【讨论】:

        • 但是用户可以用键盘在框上输入任何值。
        【解决方案5】:

        我看到这是旧的但是... 我不知道您是否正在寻找代码以在每次加载时生成数字/选项。但我使用 excel 或打开的 office calc 页面并一直使用自动编号。它可能看起来像这样......

        | &lt;option&gt; | 1 | &lt;/option&gt; |

        然后我突出显示该行中的单元格并将它们向下拖动,直到有 100 或我需要的数字。我现在有代码 sn-ps,我只是参考。

        【讨论】:

          【解决方案6】:

          Jquery 单行代码:

          ES6 + jQuery:

          $('#select').append([...Array(100).keys()].map((i,j) => `< option >${i}</option >`))
          

          Lodash + jQuery:

          $('#select').append(_.range(100).map(function(i,j){ return $('<option>',{text:i})}))
          

          【讨论】:

            【解决方案7】:

            正如其他人所说,html 中没有;但是,您可以使用PUG/Jade。事实上,我经常这样做。

            看起来像这样:

            select
              - var i = 1
              while i <= 100
                option=i++
            

            这将产生:

            【讨论】:

              猜你喜欢
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 2017-09-09
              • 1970-01-01
              • 2017-10-09
              • 1970-01-01
              • 2013-11-15
              • 2018-11-03
              相关资源
              最近更新 更多