This works correctly for single, double treble. However it wont do the same for fourfold it only displays 3 fields. I have actually got this all the way up to 8fold which is 8 input fields but again only displays 3 inputs.
$("#bettype").change(function() {
var bettype = $(this).children("option:selected").val();
if (bettype == "single") {
$(".removethis").remove();
$("#selections").append($("<input type='text' value='Single' class='removethis'/>"));
} else if (bettype == "double") {
$(".removethis").remove();
$("#selections").append($("<input type='text' value='Selection 1' class='removethis'/>"));
$("#selections").append($("<input type='text' value='Selection 2' class='removethis'/>"));
} else if (bettype == "treble" || "trixie" || "patent") {
$(".removethis").remove();
$("#selections").append($("<input type='text' value='Selection 1' class='removethis'/>"));
$("#selections").append($("<input type='text' value='Selection 2' class='removethis'/>"));
$("#selections").append($("<input type='text' value='Selection 3' class='removethis'/>"));
} else if (bettype == "fourfold" || "yankee" || "lucky15") {
$(".removethis").remove();
$("#selections").append($("<input type='text' value='Selection 1' class='removethis'/>"));
$("#selections").append($("<input type='text' value='Selection 2' class='removethis'/>"));
$("#selections").append($("<input type='text' value='Selection 3' class='removethis'/>"));
$("#selections").append($("<input type='text' value='Selection 4' class='removethis'/>"));
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<select id="bettype" name="bettype">
<option disabled>Bet Type</option>
<option value="single">single</option>
<option value="double">double</option>
<option value="treble">Treble</option>
<option disabled>Accumulators</option>
<option value="fourfold">FourFold</option>
<option value="fivefold">FiveFold</option>
<option value="sixfold">SixFold</option>
<option value="sevenfold">SevenFold</option>
<option value="eightfold">EightFold</option>
<option value="trixie">Trixie</option>
</select>
<div id="selections">
</div>
</form>It’s sort of working because its displaying the correct bettype value in the console.
>Solution :
The if (bettype == "treble" || "trixie" || "patent") does not check for three values.
You need to do
if (bettype == "treble" || bettype == "trixie" || bettype == "patent")
or to avoid the repetition
if (["treble","trixie","patent"].includes(bettype))