Using javascript to change the value of a selectbox with an on change event handler

Question

i've made a much nicer looking JSfiddle here. That includes the expected json response, and the relevant JS.

What it's doing so far is making an ajax call for the json, and triggering an onchange which starts splitting the json up by materials, then it is putting each material group into an optgroup. which is displayed to the user.

I want to be able to set the value of the materials selection box after the first change is called so that the current usage is shown instead of the first timber one. any ideas how to fix my code to do this? it's had me stumped for a few hours now.

Javascript:

$(document).ready(

function() {

    var selectData, $states, firstRun, herp_current_material, value;
    firstRun = 0;

    function updateSelects() {
        $('#id__material').empty();
        var cities = $.map(selectData[this.value], function(city) {
            m = city.split(":");
            if (m.length == 3) {
                value = m[1] + ":" + m[2];
                value = value.toLowerCase().replace(/ /g, "_");
                if (document.getElementById(m[0])) {
                    $('#' + m[0]).append($("<option />").text(m[2]).attr("value", value));
                }
                else {
                    if (firstRun === 0) {
                        console.log(m[1]);
                        if (m[0] == "Current") {
                            herp_current_material = m[1];
                        }
                    }
                    $('#id__material').append($("<optgroup />").attr("label", m[0]).attr("id", m[0]));
                    $('#' + m[0]).append($("<option />").text(m[2]).attr("value", value));
                }
            }
            else if (m.length == 4) {
                value = m[1] + ":" + m[2] + ":" + m[0];
                value = value.toLowerCase().replace(/ /g, "_");
                if (document.getElementById(m[0])) {
                    $('#' + m[0]).append($("<option />").text(m[2]).attr("value", value));
                }
                else {
                    $('#id__material').append($("<optgroup />").attr("label", m[0]).attr("id", m[0]));
                    $('#' + m[0]).append($("<option />").text(m[2]).attr("value", value));
                }
            }
            else {
                return true;
            }
        });
        $("optgroup[label='Local']").insertBefore("optgroup[label='Global']");
        $("optgroup[label='Current']").insertBefore("optgroup[label='Local']");
    }

    $.getJSON("/appdata/joinery/ajax/usage/" + return_item_uuid() + "/" + return_component_code() + "/", function(data) {
        var state;
        selectData = data;
        $states = $('#materialwidgettypeselector').change(updateSelects);
        $states.change();
        if (firstRun === 0) {
            $('#materialwidgettypeselector option:text="' + herp_current_material + '"').attr('selected', 'selected');
            firstRun = 1;
        }
    });
});​

Html:

<label for="id__material">Material:</label></td><td style="font-weight:lighter; width:200px;"><select id="materialwidgettypeselector"><option value="timber">Timber</option><option value="sheet">Sheet</option><option value="door_blank">Door blank</option><option value="profiled">Profiled</option><option value="glass">Glass</option><option value="fitting">Fitting</option></select><br><select name="_material" id="id__material"><optgroup label="Local" id="Local"><option value="timber:softie">Softie</option></optgroup><optgroup label="Global" id="Global"><option value="timber:carcase">Carcase</option><option value="timber:cill">Cill</option></optgroup></select>

Json:

{"door_blank": [], "fitting": ["Frame:fitting:Bifold doors:Bifold Doors", "IEL:fitting:Bifold doors:Bifold Doors", "IEL:fitting:Sliding doors:Sliding Doors", "IER:fitting:Sliding doors:Sliding Doors", "IER:fitting:Bifold doors:Bifold Doors", "IL:fitting:Bifold doors:Bifold Doors", "IL:fitting:Sliding doors:Sliding Doors", "IML:fitting:Bifold doors:Bifold Doors", "IML:fitting:Sliding doors:Sliding Doors", "IMR:fitting:Sliding doors:Sliding Doors", "IMR:fitting:Bifold doors:Bifold Doors", "IR:fitting:Bifold doors:Bifold Doors", "IR:fitting:Sliding doors:Sliding Doors", "JL:fitting:Bifold doors:Bifold Doors", "JL:fitting:Sliding doors:Sliding Doors", "JML:fitting:Sliding doors:Sliding Doors", "JML:fitting:Bifold doors:Bifold Doors", "JMR:fitting:Sliding doors:Sliding Doors", "JMR:fitting:Bifold doors:Bifold Doors", "JR:fitting:Bifold doors:Bifold Doors", "JR:fitting:Sliding doors:Sliding Doors", "OEL:fitting:Bifold doors:Bifold Doors", "OEL:fitting:Sliding doors:Sliding Doors", "OER:fitting:Sliding doors:Sliding Doors", "OER:fitting:Bifold doors:Bifold Doors", "OHEL:fitting:Sliding doors:Sliding Doors", "OHEL:fitting:Bifold doors:Bifold Doors", "OHER:fitting:Bifold doors:Bifold Doors", "OHER:fitting:Sliding doors:Sliding Doors", "OHL:fitting:Sliding doors:Sliding Doors", "OHL:fitting:Bifold doors:Bifold Doors", "OHML:fitting:Sliding doors:Sliding Doors", "OHML:fitting:Bifold doors:Bifold Doors", "OHMR:fitting:Bifold doors:Bifold Doors", "OHMR:fitting:Sliding doors:Sliding Doors", "OHR:fitting:Bifold doors:Bifold Doors", "OHR:fitting:Sliding doors:Sliding Doors", "OL:fitting:Bifold doors:Bifold Doors", "OL:fitting:Sliding doors:Sliding Doors", "OML:fitting:Bifold doors:Bifold Doors", "OML:fitting:Sliding doors:Sliding Doors", "OMR:fitting:Bifold doors:Bifold Doors", "OMR:fitting:Sliding doors:Sliding Doors", "OR:fitting:Bifold doors:Bifold Doors", "OR:fitting:Sliding doors:Sliding Doors", "frame:fitting:Bifold doors:Bifold Doors", "frame:fitting:Sliding doors:Sliding Doors", "Global:fitting:Left", "Global:fitting:Right", "Global:fitting:Top"], "sheet": ["Global:sheet:Anti ballistic", "Global:sheet:Anti vandle steel sheet", "Global:sheet:Blue cladding", "Global:sheet:Core", "Global:sheet:Green cladding", "Global:sheet:Inner veneer", "Global:sheet:Insulation", "Global:sheet:Non specific layer", "Global:sheet:Outer veneer", "Local:sheet:Softie", "Current:sheet:"], "profiled": [], "timber": ["Global:timber:Carcase", "Global:timber:Cill", "Local:timber:Softie"]}​

Answer 1

设置选择列表的选择选项，使用类似于以下的语法：

$("select#myselectid").val(someobject.objectproperty).attr('selected', true);

Answer 2

$（'＃form select [name = country]'）。val（'United States'）;