how to refresh my dropdown based on another dropdo

Question

I have two dropdowns like customer and company.my customer drop down having list of customers .Based on select of customer, I have to populate the company.I am getting the company details from backend as a JSON String Object.

first time when I select customer it displaying the that perticular customer related company information.

My Problem is seconed time, I select another customer(on change) but its displaying old customer company details and present selected customer company details. I want only present customer data on my company drop down.

This is my code. On selection of customer I am getting result(company name list).

<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 has these options.

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

My requirement is if my option contains the pro then give first priority for that options .and dev is second priority and test is 3rd priority.

How to set priority for my option..

Answer 1

$("#").append('...'); will append new companies list along with your old data. On Selecting another customer you should clear old list then append new list.

Use below code.

<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>");
});
} 

If you are looking for sorting based on your option value text so you can use something like below. since your sorting is based on text and also not in alphabetical order so this is an alternate for you.

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>");
});

Answer 2

Try this:

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

Before populating new data make sure you clear your dropdown.

empty() | jquery referrence

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