Question

我正在使用Bootstrap 3.3.6，并希望使用选择器来选择一定数量。问题是我希望选项一直到99，但我注意到代码太重复，使得整个代码有点太多了。

现在我有：

<div class="form-group">
   <label for="sel1">select quantity: </label>
   <select class="form-control" id="sel1">
       <option>1</option>
       <option>2</option>
       <option>3</option>
       <option>4</option>
       <option>5</option>
   </select>
</div>

我是否必须写<option></option> 99次，或者是否有更简单快捷的方法可以做到这一点？也许用angularJS？如果是这样，任何想法如何？

谢谢！

Answer 1

您也可以使用<input type="range"/>：

<input type="number" name="quantity" min="1" max="99" value="22">

鉴于语义，我认为这个元素更好，而不是99 <option>个项目。

Answer 2

如果您可以访问PHP，则可以执行以下操作：

   <select ng-model="supplierExpenses.selectedOption" ng-change="setTotals(supplierExpenses)"
        ng-options = "item.date for item in supplierExpenses |
        unique:'date'" >

        <option value="">בחר תאריך</option>
        </select>



 <div class="table-responsive">
 <table class="customer-list table table-striped" >
            <thead>
                 <tr >

                     <th class="Column-Header">מספר ספק</th>
                     <th class="Column-Header">שם ספק</th>
                     <th class="Column-Header">כמות מוצרים שנקנו</th>
                     <th class="Column-Header">מחיר הוצאה</th>

                 </tr>
             </thead>
             <tbody>
                 <tr ng-repeat="item in supplierExpenses" ng-if = "item.date == supplierExpenses.selectedOption.date"
                  >

                     <td>{{item.supplier_id}}</td>
                     <td>{{item.name}}</td>
                     <td>{{item.description}}</td>
                     <td>{{item.total_price}}</td>

                 </tr>
             </tbody>
             <tfoot>

                 <tr class="bg-warning">
                     <td><font size="6">סה"כ הוצאות</font></td>
                     <td><font size="6">{{totalExpenses}}</font></td>
                     <td></td>
                 </tr>
             </tfoot>

         </table>


 </div>

Answer 3

你可以使用循环：

var text = 0;
for (i = 0; i <100; i++) { 
    text += "<option>"+[i]+"</option><br />";
}

Bootstrap选择太多代码的选项

3 个答案: