使用JavaScript通過on change事件處理程序更改選擇框的值

Question

我在這里做了一個更好看的JSfiddle 。 其中包括預期的json響應和相關的JS。

到目前為止，它所做的是對json進行ajax調用，並觸發一個onchange，該onchange開始按材質拆分json，然后將每個材質組放入一個optgroup中。 顯示給用戶。

我希望能夠在調用第一個更改后設置材料選擇框的值，以便顯示當前用法而不是第一個木材。 任何想法如何解決我的代碼做到這一點？ 現在我已經迷迷了幾個小時。

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>

傑森：

{"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'）;