每次我选择选择字段时，都会激活 on change 事件，但不会删除旧值

Question

每次我输入选择字段时，都会激活 on change 事件，但不会删除旧值。我想要的是从选项中删除旧的属性，单击的新属性应该得到属性。

查看图片：

我确实想要单选而不是多选。

我的代码：

jQuery(document).ready(function($) {

    var data, 
    postData, 
    brandsArr = [], 
    uniqBrandsArr = [], 
    typeArr = [], 
    fuelArr = [];

    var brand = $('#brand'),
    brandOption = brand.find('#option-brand');


    data = {
        'action': 'ajax'
    };  

    jQuery.get(ajaxurl, data, function(response) {
        postData = jQuery.parseJSON(response);

        jQuery.each(postData, function(index, value) {
            if(value.meta_key === 'brand') {
                brandsArr.push(value.meta_value);
            } else if(value.meta_key === 'type') { 
                typeArr.push(value.meta_value);
            } else if(value.meta_key === 'fuel') {
                fuelArr.push(value.meta_value);
            }
        });

        var uniqBrandsArr = brandsArr.filter(function(value, index){
            return brandsArr.indexOf(value) == index;
        });

        jQuery.each(uniqBrandsArr, function(index, value){
            brand.append($('<option>',
            {
                id: 'option-brand',
                value: value,
                text: value
            }));    
        });

        brand.on('change', function(){
            brandSelectedOption = $(this).children("option:selected").attr('selected', true);

        }); 


    });

});

当我再次单击选择字段并选择一个新选项时我想要什么，必须删除旧的属性选择选项。

Answer 1

当我再次单击选择字段并选择一个新选项时，必须删除旧的属性选择选项。

所以你必须在选择新选项之前取消选择每个选项...

brand.on('change', function(){

  // Add this line:
  $(this).children("option").attr('selected', false);

  brandSelectedOption = $(this).children("option:selected").attr('selected', true);

});

这是一个简单的演示......检查标记以查看属性。

$("select").on("change", function() {

  // Removes all selected attributes
  $(this).children("option").attr('selected', false);

  // Adds the attribute on the currently selected
  $(this).children("option:selected").attr('selected', true);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select>
  <option>Zero</option>
  <option>One</option>
  <option>Two</option>
  <option>Three</option>
  <option>Four</option>
</select>

---

编辑

由于选项是动态添加的，试试：

$(document).on('change', '#brand', function(){

而不是brand.on('change', function(){