Set selected option in dynamically populated drop down Jquery

Question

I have 2 cascading drop downs: Drop Down A(populated from data base no static values) and Drop Down B

User selects a value from Drop down A and based on that values are poplulated in Drop Down B(again from the locally stored data based table).This all is working fine

Now Lets say Drop Down A has items: Item1,Item 2,Item 3....

Drop Down B has values for Item 1 : 10,20,30

for Item 2 : 10,50,40

for Item 3 : 20,70,90.

User chooses Item 1 and selects value "10" from Down B,page submits and for a new entry he chooses Item 2,

Now my requirement is if the user chooses Item 2 then my drop Down B should auto default to value "!0" as this was the last value that user has chosen and also this is a value that exists for Item 2.

I am creating both the drop downs dynamically like this :

function some (){

    var numUnits = measureSet.length;
    var htmlOutput = '<select name="select-choice-a_point" class="ui-select" id="select-choice-a_point" data-native-menu="false"><option>Select a Fluid Type</option>';
    for ( var i = 0; i < numUnits; i++) {

        htmlOutput += '<option value="' + measureSet[i] + '">' + measureSet[i]
        + '</option>';
    }
    htmlOutput += '</select>';

    $("#select-choice-a_point-button").remove();
    $("#select-choice-a_point").remove();
    $("#pointlabel").after(htmlOutput);
    $("#select-choice-a_point").selectmenu();

}

Can some one please suggest how can i set the value to the last chosen value in drop downs which are dynamically created and populated?

I have tried that already,it did not work and it still shows the default value which is "Select a fluid type" please see my code below

  function abc(){


   var setLength = measureSet.length;
   var valueSet = false;
    alert(prevFuelType);
     for ( var i = 0; i < setLength; i++) {

            if(prevFuelType == measureSet[i]){

        alert("inside condition");
        valueSet =  true;
        break;
    }
}
var htmlOutput = '<select name="select-choice-a_point" class="ui-select"  id="select-choice-a_point" data-native-menu="false"><option>Select a Fluid Type</option>';


var numUnits = measureSet.length;

for ( var i = 0; i < numUnits; i++) {


    htmlOutput += '<option value="' + measureSet[i] + '">' + measureSet[i]
    + '</option>';
}
htmlOutput += '</select>';

$("#select-choice-a_point-button").remove();
$("#select-choice-a_point").remove();
$("#pointlabel").after(htmlOutput);
$("#select-choice-a_point").selectmenu();
if(valueSet == true){
    alert("bout to set");
    //$("select[id$='select-choice-a_point'] option:selected").removeAttr("selected");
    //$("select[id$='select-choice-a_point'] option[value="+ prevFuelType + ']").attr("selected","selected");

        /*  $('#select-choice-a_point option:[text="' + prevFuelType + '"]').attr('selected', true);
    $('#select-choice-a_point option:[value="' + prevFuelType + '"]').attr('selected', true);*/
    $("#select-choice-a_point").val(prevFuelType);
    $("#select-choice-a_point").text(prevFuelType);
}



$('#measurepointfield').show();
}

Ruby Racer Ruby Racer · Accepted Answer · 2014-07-30T18:36:34

// drop_down_A changes. What happens now?
var last_val = $('#drop_down_B').val(); // let's keep the current value;
// now, you do your magic and repopulate $('#drop_down_B')
// ..
// ..
$('#drop_down_B').val(last_val); 
// if the value exists it will be selected, otherwise nothing will happen

Set selected option in dynamically populated drop down Jquery

1 Answers