将选择选项添加到ID

Question

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

当我仅使用单个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> 

Answer 1

 $( 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> 

希望你能得到什么改变。

Answer 2

您能详细说明一下吗，我似乎无法理解您要使用的方式

 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")
 });

Answer 3

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);

会做的事情。

Answer 4

您应该提到选择数组的索引。 也总是在顶部加载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>