CODEWITHSUNDEEP
javascriptjquery
learner
learner

Reputation: 108

add select options to id

I have to give same select options multiple times with different names. check my code and help me!

this code is working when i am using only single 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>

Upvotes: 0

Views: 107

Answers (4)

Karthikeyani Srijish
Karthikeyani Srijish

Reputation: 480

You should mention the index of select array. Also always load jquery library file at the top.

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

Upvotes: 0

void
void

Reputation: 36703

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

Will do the thing.

Upvotes: 0

saikiran.vsk
saikiran.vsk

Reputation: 1796

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

Hope you got, what to change.

Upvotes: 2

Mhammad Chehab
Mhammad Chehab

Reputation: 93

Can you elaborate more i can't seem to understand what you want by the way why are you using 

 querySelectorAll

when you can simply re-order you html as follows : 

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

Upvotes: 1

Related Questions