CODEWITHSUNDEEP
javascriptjqueryhtml
Red
Red

Reputation: 139

How to make this select box in Javascript work so it enables another select box?

so I have a select box (company_selection) and that is generated in Javascript and I need it so when the option 'GW' is selected it enables the other select box (profile_selection) and allows you to choose the option 'ADickinson' when GW is selected in the other checkbox, however it's not working and I'm not sure why. Probably be something obvious :-)

      $(document).ready(function () {
formatAppSelect();

});

This is the method I have wrote to try get all this work. The variable companies are just the static options that I'm trying to get this to work with, they are the companies in the select box. The If statement is where the enabling is supposed to happen but when GW is selected in the select box nothing happens, what do I need to do? :) Don't think I need to post the HTML but I will if asked c:

     function formatAppSelect() {

var Companies = [{ Company: "GW" }, { Company: "TP" }];

var companyselectHTML = "<select name='select_company' id='select_company' class='form_drop_down' data-role='none'>" +
                            "<option>None</option>";

var profileselectHTML = "<select name='select_profile' id='select_profile' class='form_drop_down' data-role='none'>" +
                            "<option>None</option>";


for (var p = 0; p < Companies.length; p++) {
    companyselectHTML += "<option value='" + Companies[p].Company + "'>" + Companies[p].Company + "</option>";
}

profileselectHTML += "</select>";
$("#profile_selection").html(profileselectHTML);

profileselectHTML += "</select>";
$("#company_selection").html(companyselectHTML);

if (companyselectHTML == "GW") {

    profileselectHTML += "<option value='ADickinson'>ADickinson </option>";

}


 }

Upvotes: 0

Views: 82

Answers (2)

dreamweiver
dreamweiver

Reputation: 6002

I hope this is what you were trying to achieve

JQUERY CODE:

$(document).on('change', '#select_company', function () { if ($(this).val() == "GW") $('#select_profile').append('<option value="ADickinson" selected="selected">ADickinson </option>'); });

LIVE DEMO @ JSFIDDLE:

http://jsfiddle.net/dreamweiver/nZ8ma/6/

Since the Drop-down elements are added dynamically, you need to use delegated event handlers by attaching the event to the main root element document on your page.

Happy Coding :)

Upvotes: 1

V&#237;tor Marques
V&#237;tor Marques

Reputation: 349

$("#select_company").change(function(){//will be called when the select change of value
    if($(this).val() == "GW"){
        $("#select_profile").html("<option value='ADickinson'>ADickinson </option>");
    }else{ $("#select_profile").html(); }
});

Upvotes: 2

Related Questions