追加更改未追加正確的專案

這適用于單、雙高音。但是它不會對四重做同樣的事情，它只顯示 3 個欄位。我實際上已經得到了 8fold，這是 8 個輸入欄位，但同樣只顯示 3 個輸入。

$("#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 演示

它有點作業，因為它在控制臺中顯示了正確的 bettype 值。

uj5u.com熱心網友回復：

在if (bettype == "treble" || "trixie" || "patent")不檢查三個值。

你需要做

if (bettype == "treble" || bettype == "trixie" || bettype == "patent")

或避免重復

if (["treble","trixie","patent"].includes(bettype))

uj5u.com熱心網友回復：

使用回圈和值映射可以顯著簡化此代碼。

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>

您可以通過將值放在標記中來消除對地圖的需要。

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

標籤：查询

上一篇：更改篩選欄位中的選擇欄位selectedIndex

下一篇：如何使用JQuery計算頁面加載時間？