jQueryを使用してラジオボタンが変更された場合に新しいオプションを追加する方法

jQueryを使用して<select>に新しい「アイテム」を追加しようとしています。両方の可能性（国）のいずれかがチェックされている場合、下の「選択ボックス」はリスト<options>を変更する必要があります。jQueryを使用してラジオボタンが変更された場合に新しいオプションを追加する方法

$("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"> 
 
\t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t </select> 
 
    </form> 
 
    </div> 
 
</div>

このコードwon`tラン：

は、これは私のコードです。どうして？

出典

2017-02-17 Thomas Weber

通常のhtmlをこのように追加してみましたか？ Option '+ i +' '）;' –

このように通常のHTMLを追加してみましたか？ Option '+ i +' '）;' –

@ThomasWeber私はあなたを助けましたか？ – Miles07

私が何をしたいことは選択したラジオボタンに応じて、コンボボックスの変更オプションであると考えています。あなたがする必要があるのは、新しいオプションを追加する前にコンボボックスオプションをクリアすることです。

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

出典

2017-02-17 07:24:27

こんにちは、あなたのサポートに大変感謝します。それは本当に私を助けた。私はあなたの提案を心に留めておきます。前のコメント（Miles07への回答として）で私のテキストを考えてください。 –

もう一度私はもう一度です。あなたの "ソリューション"を自分のHTML/JS環境にコピーしました。それは実行されません。 [link] http :: //presentation.wei-ag.net/sites/rechner2.html [/ link]を参照してください。どうして？たぶんあなたは少し時間があり、もう一度私を助けるかもしれません...ありがとうございました。 –

私は問題があなたのCSSにあると思います。#selectCostsの寸法は（0.5pxで34pxまで） –

オーストリア国がチェックされていて、ドイツがチェックされているかどうかのみチェックします。また、ループの前に$("#selectCosts").empty();を追加して、リスト内の項目を空にします。

$('#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">&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"> 
 
\t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t </select> 
 
    </form> 
 
    </div> 
 
</div>

：@TaufikヌールRahmandaによって作られたこの提案では

$('#selectCosts').append($('<option>', { value: i, text: "Option " + i }));

を：また、この部分を置き換えることができ

EDIT

出典

2017-02-17 07:14:59 Miles07

やあみんな/女の子/開発！

あなたのサポートのために多くのThx。

私は自分の問題を解決しました。すべての提案は正常に動作しています。

私は「ブートストラップ - 選択.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）;

出典

2017-02-25 11:51:29

jQueryを使用してラジオボタンが変更された場合に新しいオプションを追加する方法

答えて

関連する問題