将select选项添加到id中

add select options to id

本文关键字：id 添加 select 选项      更新时间：2024-01-20

我不得不用不同的名称多次给出相同的选择选项。检查我的代码并帮助我！

当我只使用单个id时，此代码有效。

$( document ).ready(function() {
      
    //select options for spending amount
    select = document.querySelectorAll("#amount0, #amount1, #amount2, #amount3, #amount4");
    var opt1 = document.createElement('option');
    opt1.value = 35;
    opt1.innerHTML = 35;
    select.appendChild(opt1);
    var opt = document.createElement('option');
    opt.innerHTML = 50;
    opt.value = 50;
    select.appendChild(opt);
    //loop for 100 to 1000
    for (var i = 1; i<=10; i++){
      var opt = document.createElement('option');
      var x = 100;
      x = x*i;
      opt.value = x;
      opt.innerHTML = x;
      select.appendChild(opt);
    }
  });
<td><select id="amount0" name="amount_monday" class="form-control input-sm"></select></td>
<td><select id="amount1" name="amount_tuesday" class="form-control input-sm"></select></td>
<td><select id="amount2" name="amount_wednesday" class="form-control input-sm"></select></td>
<td><select id="amount3" name="amount_friday" class="form-control input-sm"></select></td>
<td><select id="amount4" name="amount_sunday" class="form-control input-sm"></select></td>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

$( document ).ready(function() {
      
    //select options for spending amount
    select = document.querySelectorAll("#amount0, #amount1, #amount2, #amount3, #amount4");
  var selCount = select.length;
  
 for(var sC=0; sC<selCount; sC++){
   var opt1 = document.createElement('option');
    opt1.value = 35;
    opt1.innerHTML = 35;
    select[sC].appendChild(opt1);
    var opt = document.createElement('option');
    opt.innerHTML = 50;
    opt.value = 50;
    select[sC].appendChild(opt);
    //loop for 100 to 1000
    for (var i = 1; i<=10; i++){
      var opt = document.createElement('option');
      var x = 100;
      x = x*i;
      opt.value = x;
      opt.innerHTML = x;
      select[sC].appendChild(opt);
    }
  }
    
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td><select id="amount0" name="amount_monday" class="form-control input-sm"></select></td>
<td><select id="amount1" name="amount_tuesday" class="form-control input-sm"></select></td>
<td><select id="amount2" name="amount_wednesday" class="form-control input-sm"></select></td>
<td><select id="amount3" name="amount_friday" class="form-control input-sm"></select></td>
<td><select id="amount4" name="amount_sunday" class="form-control input-sm"></select></td>

希望你有所改变。

你能详细说明吗？顺便说一下，我似乎不明白你想要什么，为什么要使用

 querySelectorAll

当你可以简单地重新订购你的html如下：

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <td><select id="amount0" name="amount_monday" class="amountselect form-control input-sm">     </select></td>
 <td><select id="amount1" name="amount_tuesday" class="amountselect form-control input-sm"> 

$(function(){
    //all the selects are here
    var selects = $("select.amountselect")
 });

var opt = ""
for (var i = 1; i<=10; i++){
      var x=100;
      var opt = "<option value='"+x*i+"'>"+x*i+"</option>";
    }
$("#amount0, #amount1, #amount2, #amount3, #amount4").html(opt);
// or $(".form-control").html(opt);

会做这件事的。

您应该提到select数组的索引。还要始终在顶部加载jquery库文件。

$( document ).ready(function() {
      
    //select options for spending amount
    select = document.querySelectorAll("#amount0, #amount1, #amount2, #amount3, #amount4");
    var opt1 = document.createElement('option');
    opt1.value = 35;
    opt1.innerHTML = 35;
    select[0].appendChild(opt1);
    var opt = document.createElement('option');
    opt.innerHTML = 50;
    opt.value = 50;
    select[0].appendChild(opt);
    //loop for 100 to 1000
    for (var i = 1; i<=10; i++){
      var opt = document.createElement('option');
      var x = 100;
      x = x*i;
      opt.value = x;
      opt.innerHTML = x;
      select[0].appendChild(opt);
    }
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

相关文章：