Question

我尝试使用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">&nbsp;</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">&nbsp;</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>

此代码不会运行。为什么呢？

Answer 1

您只检查是否检查了奥地利国家/地区，而不检查德国是否已经过检查。另外，我会在循环之前添加$("#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">  <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>  <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>

Answer 2

我相信你想要的是组合框的更改选项，具体取决于所选的单选按钮。您需要做的是在添加新选项之前先清除组合框选项。

$("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">&nbsp;</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">&nbsp;</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>

Answer 3

Hey Guys / Girls / Developer！

非常感谢您的支持。

我解决了我的问题。所有建议都很好。

我已经包含了一个＆＃34; bootstrap-select.min.js＆＃34;这造成了一些冲突并导致了问题。因为我排除了这个.js-File一切正常。

非常感谢！

以下是我正在使用的代码（仅限JS）：

std::wstring

}）;

} document.addEventListener（＆＃39; DOMContentLoaded＆＃39;，init）;

如何添加新选项以选择是否使用jQuery更改radiobutton

3 个答案: