Question

我正在尝试在选择其他标记时清除选择选项，因为当我选择其他品牌时，请不要清除以前型号中的型号。示例我选择Mark得到了模型（bmm1，bmw2）。我现在选择我得到的奥迪（audi1，audi2，bmw1，bmw）我不需要；在此选项（Audi）标记中不需要此bmw1我bmw2。我在stackover流上搜索了这个问题，但没有得到任何结果，但是代码结构与我的完全不同。

这是我的脚本

<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();

Answer 2

只需在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 3

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

用户选择其他选项Jquery或Vanilla Jquery时如何清除选择选项

3 个答案: