如何添加新選項以選擇是否使用jQuery更改了單選按鈕
[英]How to add new option to select if radiobutton is changed using jQuery
問題描述
我嘗試使用jQuery將新的“項目”添加到給定的<select>中。 如果選中兩個可能性（國家）之一，則下面的“選擇框”應更改列表<options> 。
這是我的代碼：
$("input:radio[name=radio-1]").change(function() { //alert ($(this).val()); if ($(this).val() == "aut") { for (i = 18; i < 21; i++) { $('#selectCosts').append($('<option>', { value: i, text: "Option " + i })); } }; });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="country"> <h2>Land</h2> <form name="selectPowerCost"> <fieldset> <div id="selectCountry" class="col col-md-12"> <!-- Österreich --> <div class="radio pull-left" style="margin-top: -5px; min-width:150px;"> <label for="radio-1">Österreich<span class="country-aut"> </span></label> <input class="left-20" type="radio" name="radio-1" id="radio-1" value="aut"> </div> <!-- Deutschland --> <div class="radio pull-left left-10" style="min-width:150px;"> <label for="radio-2">Deutschland<span class="country-ger"> </span></label> <input class="left-20" type="radio" name="radio-1" id="radio-2" value="ger"> </div> </div> </fieldset> </form> </div> <div id="stromkostenProKW"> <h2>Stromkosten pro KWh</h2> <div class="pull-left" style="margin-top: -5px"> <form> <select id="selectCosts" name="selectCosts" class="selectpicker" title="Wählen Sie Ihre Stromkosten pro KWh"> </select> </form> </div> </div>
該代碼不會運行。 為什么？
3 個解決方案
解決方案1
0 2017-02-17 07:14:59
您僅檢查是否檢查了奧地利國家，而不檢查了德國。 我也將添加$("#selectCosts").empty(); 在循環之前清空列表中的項目。
編輯
您也可以替換此部分：
$('#selectCosts').append($('<option>', { value: i, text: "Option " + i }));
在@Taufik Nur Rahmanda的建議下：
$('#selectCosts').append('<option value="'+i+'">Option '+i+'</option>');
$("input:radio[name=radio-1]").change(function() { //alert ($(this).val()); if ($(this).val() == "aut" || $(this).val() == "ger") { $("#selectCosts").empty(); for (i = 18; i < 21; i++) { $('#selectCosts').append($('<option>', { value: i, text: "Option " + i })); } }; });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="country"> <h2>Land</h2> <form name="selectPowerCost"> <fieldset> <div id="selectCountry" class="col col-md-12"> <!-- Österreich --> <div class="radio pull-left" style="margin-top: -5px; min-width:150px;"> <label for="radio-1">Österreich<span class="country-aut"> </span></label> <input class="left-20" type="radio" name="radio-1" id="radio-1" value="aut"> </div> <!-- Deutschland --> <div class="radio pull-left left-10" style="min-width:150px;"> <label for="radio-2">Deutschland<span class="country-ger"> </span></label> <input class="left-20" type="radio" name="radio-1" id="radio-2" value="ger"> </div> </div> </fieldset> </form> </div> <div id="stromkostenProKW"> <h2>Stromkosten pro KWh</h2> <div class="pull-left" style="margin-top: -5px"> <form> <select id="selectCosts" name="selectCosts" class="selectpicker" title="Wählen Sie Ihre Stromkosten pro KWh"> </select> </form> </div> </div>
解決方案2
0 已采納 2017-02-17 07:24:27
我相信您想要的是根據所選單選按鈕更改組合框的選項。 您需要做的是先清除組合框選項，然后再添加新選項。
$("input:radio[name=radio-1]").change(function() { //alert ($(this).val()); var val = $(this).val(); $('#selectCosts').find('option').remove().end(); if (val == "aut") { for (i = 18; i < 21; i++) { $('#selectCosts').append($('<option>', { value: i, text: "Option " + i })); } } else if(val == "ger") { for (var i = 1; i < 5; i++) { $('#selectCosts').append($('<option>', { value: i, text: "Option " + i })); } } });
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"> </script> <div id="country"> <h2>Land</h2> <form id="selectPowerCost" name="selectPowerCost"> <fieldset> <div class="col col-md-12" id="selectCountry"> <!-- Österreich --> <div class="radio pull-left" style="margin-top: -5px; min-width:150px;"> <label for="radio-1">Österreich<span class="country-aut"> </span></label> <input class="left-20" id="radio-1" name="radio-1" type="radio" value="aut"> </div><!-- Deutschland --> <div class="radio pull-left left-10" style="min-width:150px;"> <label for="radio-2">Deutschland<span class="country-ger"> </span></label> <input class="left-20" id="radio-2" name="radio-1" type="radio" value="ger"> </div> </div> </fieldset> </form> </div> <div id="stromkostenProKW"> <h2>Stromkosten pro KWh</h2> <div class="pull-left" style="margin-top: -5px"> <form> <select class="selectpicker" id="selectCosts" name="selectCosts" title="Wählen Sie Ihre Stromkosten pro KWh"> </select> </form> </div> </div> </body> </html>
解決方案3
0 2017-02-25 11:51:29
嗨，男生/女生/開發人員！
非常感謝您的支持。
我解決了我的問題。 所有建議都工作正常。
我包含了一個“ bootstrap-select.min.js”，它引起了一些沖突並導致了問題。 由於我排除了此.js文件，所以一切正常。
非常感謝你！
這是我正在使用的代碼（僅JS）：
function init() {
$("input:radio[name=radio-1]").change(function() {
var val = $(this).val();
$('#selectCosts').find('option').remove().end();
if (val == "aut") {
for (i = 16; i < 22; i++) {
$('#selectCosts').append($('<option>', {
value: i,
text: "Kosten pro KWh: " + i + " ct"
}));
}
} else if(val == "ger") {
for (var i = 26; i < 33; i++) {
$('#selectCosts').append($('<option>', {
value: i,
text: "Kosten pro KWh: " + i + " ct"
}));
}
}
}）;
} document.addEventListener（'DOMContentLoaded'，init）;
如何使用jQuery向HTML選擇添加選項
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.