使用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'）;