javascript - 当用户选择另一个选项 Jquery 或 Vanilla Jquery 时如何清除选择选项

Question

当我选择不同的标记时，我试图清除选择选项，因为当我选择另一个品牌时，不要清除以前的模型。示例我选择 Mark got models (bmm1,bmw2)。我现在选择 Audi I got(audi1,audi2, bmw1,bmw)I don;t need this bmw1 i bmw2 in this option (Audi) mark.我在 stackover flow 上搜索了这个问题并得到了任何结果，但代码结构与我的非常不同。

这是我的脚本

<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

.append() 将 html 附加到现有 html 字符串的末尾。尝试使用 .html()。希望这对您有所帮助。

更新

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

到

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

或者如果你想使用append()函数然后清除select使用:

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