Как снять флажок выбора, когда пользователь выбирает другой вариант Jquery или Vanilla Jquery

Question

Я пытаюсь очистить опцию выбора, когда выбрана другая марка, потому что, когда я выбираю другую марку, не удаляйте модели из предыдущих.Пример я выбираю марки получил модели (bmm1, bmw2).Теперь я выбираю Audi, который получил (audi1, audi2, bmw1, bmw). Мне не нужен этот bmw1 i bmw2 в этой опции (Audi).Я ищу этот вопрос в потоке стека и получил какой-либо результат, но структура кода сильно отличается от моей.

Это мой скрипт

<script type="text/javascript">
 $('#button-getdata').on('change', function() {
   $.ajax({
    url: 'index.php?route=api/reifenmontage/get_marka_data',
    type: 'post',
    data: $('#reifenmontage-input select'),
    dataType: 'json',
    beforeSend: function() {

    },
    success: function(json) {

        if (json['success']) {
            for (i in json['success']) {
            var element = json['success'][i];
                //console.log(element);
                html = "\t<option value=\""+ element['model'] + "\">" + 
    element['model'] + "</option>\n";
                $('#result').append(html);  
            }
        }   
    }
});
 });
 </script>  

  <script type="text/javascript">

$.ajax({
 url: 'index.php?route=api/reifenmontage/mark',
 context: document.body,
 success: function(data) {
  const selectControl = $('#button-getdata');
  selectControl.html(data.map(ExtractData).join(''));
 }
 });

 function ExtractData(item) {
 return ` <option value="${item.value}">${item.label}</option>`;
 }

   </script>

и html

                 <div id="reifenmontage-input" class="row termin_row">
                    <div class="col-xs-12 col-sm-4">
                       <div class="row">
                          <label>Mark und model</label>
                       </div>
                    </div>
                    <div class="col-xs-12 col-sm-4">
                       <div class="row">
                          <select name="marka"   class="form-control" 
     id="button-getdata">
                          </select>
                       </div>
                    </div>
                    <div class="col-xs-12 col-sm-4">
                       <div class="row">
                          <select class="form-control" id="result"> 
                          </select> 
                       </div>
                    </div>

                 </div>

Answer 1

Просто вам нужно удалить предыдущие элементы в вашей success функции

См. $('#result').html('') ниже

success: function(json) {

  if (json['success']) {
        $('#result').html('')
        for (i in json['success']) {
        var element = json['success'][i];
             //console.log(element);
             html = "\t<option value=\""+ element['model'] + "\">" + 
element['model'] + "</option>\n";
             $('#result').append(html);  
        }
  } 

}

Answer 2

HTML:

<select id="result">
  <option value="" disabled selected hidden>Please Choose...</option> <!-- Placeholder -->
</select>

Зацикливайте свои параметры и удаляйте их, кроме первого.Потому что это ваш заполнитель

$("#result option:not(:first)").each(function(){ //Remove all Items but not the first
  $(this).remove();
});

for (i in json['success']) {
  var element = json['success'][i];

  html = "\t<option value=\""+ element['model'] + "\">" + element['model'] + "</option>\n";
  $('#result').append(html);
}

Более элегантно:

var optionsArray = [];
$("#result option:not(:first)").each(function(){ //Remove all Items but not the first
  $(this).remove();
});

json['success'].forEach(function(element) { //loop your results
  optionsArray.push(new Option(element.model, element.model)); //create option and store it in array
});

$("#result").append(optionsArray); //append array with options to select

Answer 3

.append() добавляет html в конец существующей html-строки.Попробуйте использовать .html().надеюсь, это поможет вам.

обновление

$('#result').append(html);

до

$('#result').html(html);

или если вы хотите использовать функцию append(), то очистите select, используя:

$('#result').find('option').remove();