Append on change not appending correct items-CodePudding

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>

jsFiddle demo

It's sort of working because its displaying the correct bettype value in the console.

CodePudding user response：

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))

CodePudding user response：

This code can be dramatically simplified using a loop and map of values.

const optionMap = {
  'single': 1,
  'double': 2,
  'treble': 3,
  'trixie': 3,
  'patent': 3,
  'fourfold': 4,
  'yankee': 4,
  'lucky15': 4,
  'fivefold': 5,
  'sixfold': 6,
  'sevenfold': 7,
  'eightfold': 8
};

$("#bettype").change(function() {
  const bettype = $(this).children("option:selected").val();
  $(".removethis").remove();

  if (optionMap[bettype]) {
    for (let i = 0; i < optionMap[bettype]; i  ) {
      $("#selections").append($("<input type='text' value='Selection "  
        parseInt(i   1)  
        "' 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>

You could eliminate the need for the map by putting the values right in the markup.

$("#bettype").change(function() {
  const bettype = $(this).children("option:selected").val();
  $(".removethis").remove();

  for (let i = 0; i < bettype; i  ) {
    $("#selections").append($("<input type='text' value='Selection "  
      parseInt(i   1)  
      "' 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="1">single</option>
    <option value="2">double</option>
    <option value="3">Treble</option>
    <option disabled>Accumulators</option>
    <option value="4">FourFold</option>
    <option value="5">FiveFold</option>
    <option value="6">SixFold</option>
    <option value="7">SevenFold</option>
    <option value="8">EightFold</option>
    <option value="3">Trixie</option>
  </select>
  <div id="selections">
  </div>
</form>