How to update my dropdown based on another dropdown

Question

I have two drop-down lists, such as a client and a company.my client, that have a list of clients. Based on the choice of the client, I have to fill the company. I get company data from the backend as a JSON String object.

The first time I select a customer, it displays information about your company related to specific customers.

My problem is from time to time, I choose another client (when changing), but it displays information about old customers and represents the selected details of the client’s company. I want only the customer data in my company to drop out.

This is my code. When choosing a client, I get the result (list of company names).

<script language="JavaScript">
function getcompanyNames(result){
    var data = JSON.parse(result);
    $.each(data, function(key, value)
    {
        $("#companydetails").append("<option>" + value.environments_name  + "</option>");
    });

} 

My drop-down list has the following options.

hcl - dev
ibm -  test
infosys -pro
ibm-pro
ec- -test

, pro, . dev - , - 3- .

.

Answer 1

, .

empty() | jquery referrence

$( "#companydetails" ).empty();

Answer 2

:

function getcompanyNames(result){
    var data = JSON.parse(result);
    $("#companydetails").html('');
    $.each(data, function(key, value)
    {
        $("#companydetails").append("<option>" + value.environments_name  + "</option>");
    });
    $("#companydetails").selectmenu("refresh", true);
} 

Answer 3

.

$( "#" ) ( '...'); . , .

.

<script language="JavaScript">
function getcompanyNames(result){
var data = JSON.parse(result);
$("#companydetails").html('');
$.each(data, function(key, value)
{
    $("#companydetails").append("<option>" + value.environments_name  + "</option>");
});
} 

, - . , , .

var data = JSON.parse(result);
var sortedData = $.merge([], $.grep(data, function (item) { return item.environments_name.toLowerCase().indexOf("pro") > -1; }));
sortedData = $.merge(sortedData, $.grep(data, function (item) { return item.environments_name.toLowerCase().indexOf("dev") > -1; }));
sortedData = $.merge(sortedData, $.grep(data, function (item) { return item.environments_name.toLowerCase().indexOf("test") > -1; }));
$("#companydetails").html('');
$.each(sortedData , function(key, value)
{
    $("#companydetails").append("<option>" + value.environments_name  + "</option>");
});