[英]add select options to id
我必須多次給相同的選擇選項使用不同的名稱。 檢查我的代碼並幫助我!
當我僅使用單個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);
會做的事情。
您應該提到選擇數組的索引。 也總是在頂部加載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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.