Question

我有一个jquery脚本，它读取一个xml文件来替换<select>值。该脚本有效但我的问题是当我点击#carMake <select>上的不同值时，脚本会将选项添加到#carModel <select>而不是替换它们。

使用Javascript：

    function carMake(){

  $.get('category1.xml', function(d){
      $(d).find('category').each(function(){  
        var $category = $(this);  
        var categoryTitle = $category.attr("name");
        var categoryID = $category.attr("id");    
        var html = '<option value="' + categoryID + '">' + categoryTitle + '</option>';    
        $('#carMake').append($(html));

        $('#loading').fadeOut('slow', function() {
            $('#loading').hide();
        });


    });
  }); 
}

function carModel(){

        $('#loading').fadeIn('fast', function() {
            $('#loading').show();
        });  

  $.get('category2.xml', function(d){
      $(d).find('category').each(function(){  
        var $category = $(this);  
        var categoryTitle = $category.attr("name");
        var categoryID = $category.attr("id");    
        var html = '<option value="' + categoryID + '">' + categoryTitle + '</option>';    
        $('#carModel').append($(html));

        $('#loading').fadeOut('slow', function() {
            $('#loading').hide();
        });  

    });
  }); 
}

carMake();

$('#carMake').change(function() {
    carModel();
});

HTML

            <div class="field"><div class="label">Car Make:</div>
            <select name="carMake" id="carMake" class="value">

            </select>
            </div>
            <div class="field"><div class="label">Car Model:</div>
            <select name="carModel" id="carModel" class="value">

            </select>
            </div>

Answer 1

在回调开头清空选择内容。

$.get('category1.xml', function(d){
    // Empty the current contents
    $('#carMake').empty();
    $(d).find('category').each(function(){  
        ...
    });
}); 

$.get('category2.xml', function(d){
    // Empty the current contents
    $('#carModel').empty();
    $(d).find('category').each(function(){  
        ...
    });
});

Answer 2

它应该可以正常工作。

$.get('category1.xml', function(d){
      $('#carMake').empty();
      $(d).find('category').each(function(){  

        var $category = $(this);  
        var categoryTitle = $category.attr("name");
        var categoryID = $category.attr("id");    
        var html = '<option value="' + categoryID + '">' + categoryTitle + '</option>';    
        $('#carMake').append($(html));

        $('#loading').fadeOut('slow', function() {
            $('#loading').hide();
        });


    });

替换<select> values </select>

2 个答案: