CODEWITHSUNDEEP
javascriptjquery
jeff78592251
jeff78592251

Reputation: 29

How reset jquery dynamically select option?

I am using dynamically select option, everything works but when I get result and changing select option it not reset result. (its adding result and not updates it).

var a = {
    Cars: [{
        "id": 1,
            "make": "Acura",
            "model": "RDX",
            "size": "Car 1"
    }, {
        "id": 12,
            "make": "Acura",
            "model": "RDX",
            "size": "Compact SUV"
    }, {
        "id": 10,
            "make": "Acura",
            "model": "MDX",
            "size": "Large SUV"
    }, {
        "id": 74,
            "make": "BMW",
            "model": "128",
            "size": "Car"
    }]
};
$("#make").change(function () {
    $('#model').empty().append($('<option></option>').val('Select Model').html('Select Model'));
    var matchVal = $("#make option:selected").text();
    a.Cars.filter(function (car) {
        if (car.make == matchVal) {
            $("#model").append($('<option></option>').html(car.model));
                            //Remove Duplicate Elements
                var seen = {};
                $('option').each(function() {
                    var txt = $(this).text();
                    if (seen[txt])
                        $(this).remove();
                    else
                        seen[txt] = true;
                });
                //
                
        }
    });
});


$("#model").change(function () {
    var matchVal = $("#model option:selected").text();
    a.Cars.filter(function (car) {
        if (car.model == matchVal) {
            $("#mydiv").append($('<h1></h1>').html(car.make));
            $("#mydiv").append($('<div></div>').html(car.model));
            $("#mydiv").append($('<div></div>').html(car.size));
        }
    });
});

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<select name="make" id="make">
    <option value="0">Select Make:</option>
    <option value="1">Acura</option>
    <option value="2">BMW</option>
</select>
<select name="model" id="model">
    <option value="model">Select Model</option>
</select>

<div id="mydiv"></div>

If after result I change "Select Make" or "Select Model" it add result e but not update. How can i fix this ?

Upvotes: 0

Views: 832

Answers (1)

matthias_h
matthias_h

Reputation: 11416

You can remove the previous result by using empty():

var a = {
    Cars: [{
        "id": 1,
            "make": "Acura",
            "model": "RDX",
            "size": "Car 1"
    }, {
        "id": 12,
            "make": "Acura",
            "model": "RDX",
            "size": "Compact SUV"
    }, {
        "id": 10,
            "make": "Acura",
            "model": "MDX",
            "size": "Large SUV"
    }, {
        "id": 74,
            "make": "BMW",
            "model": "128",
            "size": "Car"
    }]
};
$("#make").change(function () {
    $('#model').empty().append($('<option></option>').val('Select Model').html('Select Model'));
    var matchVal = $("#make option:selected").text();
    a.Cars.filter(function (car) {
        if (car.make == matchVal) {
            $("#model").append($('<option></option>').html(car.model));
                            //Remove Duplicate Elements
                var seen = {};
                $('option').each(function() {
                    var txt = $(this).text();
                    if (seen[txt])
                        $(this).remove();
                    else
                        seen[txt] = true;
                });
                //
                
        }
    });
});


$("#model").change(function () {
$("#mydiv").empty();
    var matchVal = $("#model option:selected").text();
    a.Cars.filter(function (car) {
        if (car.model == matchVal) {
        
            $("#mydiv").append($('<h1></h1>').html(car.make));
            $("#mydiv").append($('<div></div>').html(car.model));
            $("#mydiv").append($('<div></div>').html(car.size));
        }
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="make" id="make">
    <option value="0">Select Make:</option>
    <option value="1">Acura</option>
    <option value="2">BMW</option>
</select>
<select name="model" id="model">
    <option value="model">Select Model</option>
</select>

<div id="mydiv"></div>

Upvotes: 1

Related Questions