How add and remove option in my select with jquery?-CodePudding

I have this code that makes the select field "restaurant" appear only when selecting "pf II" and "pf II - extension" in "location". I would like to remove the RR option in "restaurant" when selecting "pf II - extension", can someone help me make it appear again when selecting "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 >
  <!-- LOCATION -->
  <div >
    <label for="location" i18n-key="pages.leftovers.location"></label>
    <select required name="location" id="location" >
      <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 >
    <!-- RESTAURANT -->
    <div >
      <label for="restaurant" i18n-key="pages.counters_temp.restaurant"></label>
      <select required name="restaurant" id="restaurant" >
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="RR">RR</option>
        <option value="Lavanderia">Lavandeira</option>
      </select>
    </div>
  </div>
</div>

CodePudding user response：

You can apply the condition on values of restaurant like this

$('#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 >
                    <!-- LOCATION -->
                    <div >
                        <label for="location" i18n-key="pages.leftovers.location"></label>
                        <select required name="location" id="location" >
                            <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 >
                        <!-- RESTAURANT -->
                        <div >
                            <label for="restaurant" i18n-key="pages.counters_temp.restaurant"></label>
                            <select required name="restaurant" id="restaurant" >
                                <option value="A">A</option>
                                <option value="B">B</option>
                                <option value="RR">RR</option>
                                <option value="Lavanderia">Lavandeira</option>
                            </select>
                        </div>
                    </div>
                </div>