Question

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

当我只使用单个id时，此代码正常工作。

＆＃13;

$( 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);
    }

  });

＆＃13;

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

＆＃13;

Answer 1

＆＃13;

$( 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);
    }
  }
    

  });

＆＃13;

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

＆＃13;

希望你得到，改变什么。

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

你应该提到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>

将选项添加到id

4 个答案: