Reputation: 108
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
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
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
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
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