如何使用jquery在我的選擇中添加和洗掉選項？-有解無憂

我有這段代碼使選擇欄位“restaurant”僅在“location”中選擇“pf II”和“pf II - extension”時出現。我想在選擇“pf II - extension”時洗掉“restaurant”中的 RR 選項，有人可以幫我在選擇“pf II”時讓它再次出現嗎？

$('#location').on('change', function () {
  let locationValue = $('#location').val();

  if (locationValue == "PF II" || locationValue == "PF II-extens?o") {
    $("#restaurant option[value='RR']").remove();
    $("#restaurant").removeAttr('disabled');
    $('#restaurantSelect').show();
    $("#restaurant").val("");

  } else {
    $("#restaurant").attr('disabled', 'disabled');
    $('#restaurantSelect').hide();
    $("#restaurant").val("A");
  }
})

HTML

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

<div class="form-row">
  <!-- LOCATION -->
  <div class="form-group col-md-12 col-sm-12 col-12">
    <label for="location" i18n-key="pages.leftovers.location"></label>
    <select required name="location" id="location" class="form-control">
      <option value="PF I">PF I</option>
      <option value="PF II">PF II</option>
      <option value="PF II-extens?o">PF II - EXTENS?O</option>
      <option value="PF III"> PF III</option>
      <option value="RF">RF</option>
    </select>
  </div>
</div>

<div id="restaurantSelect">

  <div class="form-row">
    <!-- RESTAURANT -->
    <div class="form-group col-md-12 col-sm-12 col-12">
      <label for="restaurant" i18n-key="pages.counters_temp.restaurant"></label>
      <select required name="restaurant" id="restaurant" class="form-control">
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="RR">RR</option>
        <option value="Lavanderia">Lavandeira</option>
      </select>
    </div>
  </div>
</div>

uj5u.com熱心網友回復：

您可以像這樣將條件應用于餐廳的值

$('#location').on('change', function() {
            let locationValue = $('#location').val();

            if (locationValue == "PF II" || locationValue == "PF II-extens?o") {
                if(locationValue == "PF II"){
                    $("#restaurant option[value='RR']").show()
                }
                else{
                     $("#restaurant option[value='RR']").hide()
                }
                $("#restaurant").removeAttr('disabled');
                $('#restaurantSelect').show(); 
                $("#restaurant").val("");         

            } else {
            $("#restaurant option[value='RR']").hide();
                $("#restaurant").attr('disabled', 'disabled');
                $('#restaurantSelect').hide();
                $("#restaurant").val("A"); 
            }
})

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

<div class="form-row">
                    <!-- LOCATION -->
                    <div class="form-group col-md-12 col-sm-12 col-12">
                        <label for="location" i18n-key="pages.leftovers.location"></label>
                        <select required name="location" id="location" class="form-control">
                            <option value="PF I">PF I</option>
                            <option value="PF II">PF II</option>
                            <option value="PF II-extens?o">PF II - EXTENS?O</option>
                            <option value="PF III"> PF III</option>
                            <option value="RF">RF</option>
                        </select>
                    </div>
                </div>

                <div id="restaurantSelect">

                    <div class="form-row">
                        <!-- RESTAURANT -->
                        <div class="form-group col-md-12 col-sm-12 col-12">
                            <label for="restaurant" i18n-key="pages.counters_temp.restaurant"></label>
                            <select required name="restaurant" id="restaurant" class="form-control">
                                <option value="A">A</option>
                                <option value="B">B</option>
                                <option value="RR">RR</option>
                                <option value="Lavanderia">Lavandeira</option>
                            </select>
                        </div>
                    </div>
                </div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/529051.html

標籤：javascripthtmljQuerydom

上一篇：如何洗掉單擊的行內元素的當前節點？

下一篇：如何堆疊我的資料集，以便每個觀察都與除自身之外的所有其他觀察相關？