Question

为什么当我一步一步地运行这个脚本时，使用firebug，它正确地设置了我的表单的值。但是当我按原样运行它时，它没有为select设置正确的值。我做错了什么？

jQuery的：

function loadPlantillaDetails(btn) {
    ...    
    $.ajax({
        url: '/LoadPlantilla',
        data: {itemId: itemId},
        type: 'POST',
        dataType: 'json',
        success: function(response) {            
            $('#itemId').val(response.itemId);
            $('#item').val(response.item);
            $('#group').val(response.group);
            $('#region').val(response.region);
            loadProvince(); //just load the options for the province select based on the value of region
            $('#province').val(response.province);            
            loadMunicipality(); //just load the options for the municipality select based on the value of province
            var mun = (response.municipality+"").substr(2,3);            
            $('#municipality').val(mun);
            $('#itemDescription').val(response.itemDescription);
            $('#salaryGrade').val(response.salaryGrade);
            $('#code').val(response.code);
            $('#itemName').val(response.itemName);
            $('#pageNo').val(response.pageNo);
            $('#locked').val(response.locked);
            $('#vacant').val(response.vacant);

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

LoadPlantilla的示例回复：

{
  "itemId" : 30,
  "item" : "579(3)",
  "group" : 3,
  "region" : 2,
  "province" : "07",
  "municipality" : "0705",
  "itemDescription" : "ELECTION OFFICER III",
  "salaryGrade" : "18",
  "code" : "EO3-245",
  "itemName" : "",
  "pageNo" : null,
  "locked" : 0,
  "vacant" : 1,
  "classification" : "P"
}

标记： 这是我的模态的代码片段，我遇到了问题

<label for="region">Region</label>
<select name="region" id="region" onchange="loadProvince()">                            
    <c:forEach var="rgn" begin="0" end="17">
        <option value="${rgn}">${rgn}</option>
    </c:forEach>
</select>

<label for="province">Province</label>        
<select name="province" id="province" onchange="loadMunicipality()">                            
</select>                        

<label for="municipality">Municipality</label>
<select name="municipality" id="municipality">                            
</select>

编辑2：

我认为这是因为请求尚未完成，因此我将success的内容移至done方法，但显然问题仍然存在。

$.ajax({
    url: '/LoadPlantilla',
    data: {itemId: itemId},
    type: 'POST',
    dataType: 'json'
}).done(function(response) {
    $('#itemId').val(response.itemId);
    $('#item').val(response.item);
    $('#group').val(response.group);
    $('#region').val(response.region);
    loadProvince();
    $('#province').val(response.province);
    loadMunicipality();
    var mun = (response.municipality + "").substr(2, 3);        
    $('#municipality').val(mun);
    $('#itemDescription').val(response.itemDescription);
    $('#salaryGrade').val(response.salaryGrade);
    $('#code').val(response.code);
    $('#itemName').val(response.itemName);
    $('#pageNo').val(response.pageNo);
    $('#locked').val(response.locked);
    $('#vacant').val(response.vacant);

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

请帮帮忙？

以下是loadProvince()和loadMunicipality()

的代码

function loadProvince() {
    var region = $("#region").val();
    $.getJSON("/chris/utilities/LoadProvince",
            {region: region
            },
    function(response) {
        var options = '';
        for (var i = 0; i < response.length; i++) {
            options += '<option value="'
                    + response[i].province + '">'
                    + response[i].area + '</option>';
        }
        $("select#province").html(options);
        loadMunicipality();
    }
    );
}

function loadMunicipality() {
    var province = $("#province").val();
    $.getJSON("/chris/utilities/LoadMunicipality",
            {province: province
            },
    function(response) {
        var options = '';
        for (var i = 0; i < response.length; i++) {
            options += '<option value="'
                    + response[i].municipality + '">'
                    + response[i].areaName + '</option>';
        }
        $("select#municipality").html(options);
    }
    );
}

老实说，我真的不太懂。我根据谷歌搜索中看到的代码以及堆栈溢出来提出这些代码。

编辑3：

我现在知道为什么在正常运行时未能设置正确的选项但在使用Firebug运行时工作正常。这是，因为我的loadRegion和loadMunicipality尚未使用getJSON，但下一行已执行。

我相信解决方案是让loadRegion和loadMunicipality 先完成，然后再继续下一行。我该怎么做呢？谢谢。：）

Answer 1

您不能简单地设置选择的值，您必须将与该值匹配的选项作为子目标，然后设置所选属性。尝试这样的事情。

$('#region option[value="' + response.region + '"]').prop('selected', true);

此外，您需要修复选项HTML中的拼写错误，它应该是值，而不是价值

<option valueu="${rgn}">${rgn}</option>

应该是

<option value="${rgn}">${rgn}</option>

这是一个JSFiddle：http://jsfiddle.net/gb7aq7bw/

Answer 2

function loadPlantillaDetails(btn) {
//...
$.ajax({
    url: '/LoadPlantilla',
    data: { itemId: itemId },
    type: 'POST',
    dataType: 'json',
    success: function (response) {
        $('#itemId').val(response.itemId);
        $('#item').val(response.item);
        $('#group').val(response.group);
        $('#region').val(response.region);
        //set all the required values first

        var mun = (response.municipality + "").substr(2, 3);
        //$('#municipality').val(mun);
        $('#itemDescription').val(response.itemDescription);
        $('#salaryGrade').val(response.salaryGrade);
        $('#code').val(response.code);
        $('#itemName').val(response.itemName);
        $('#pageNo').val(response.pageNo);
        $('#locked').val(response.locked);
        $('#vacant').val(response.vacant);

        // call load province loadProvince();
        loadProvince(response.province,mun);




    }
});

}

function loadProvince(selectedprovince,selectedMuncipality) {
var region = $("#region").val(); // u already set in the first ajax call
// here you are calling $.getJson() instead call ajax request
$.ajax({
    url: '/chris/utilities/LoadProvince', // this is ur url call to get province
    data: { region: region },
    type: 'GET',
    dataType: 'json',
    success: function (response) {
        // do stuff sucess province and call load muncipality method
        var options = '';
        for (var i = 0; i < response.length; i++) {
            options += '<option value="'
                    + response[i].province + '">'
                    + response[i].area + '</option>';
        }
        $("select#province").html(options);
        $('#province').val(selectedprovince);
        loadMunicipality(selectedMuncipality);
    },
    error: function () {
        // do error  stuff
    }
});
}

function loadMunicipality(selectedMuncipality) {
var province = $("#province").val(); // u already set in the first ajax call

// here also you are calling $.getJson() instead call ajax request

$.ajax({
    url: '/chris/utilities/LoadMunicipality', // this is ur url call to get Muncipality
    data: { province: province },
    type: 'GET',
    dataType: 'json',
    success: function (response) {
        // do stuff sucess Muncipality     

        var options = '';
        for (var i = 0; i < response.length; i++) {
            options += '<option value="'
                    + response[i].municipality + '">'
                    + response[i].areaName + '</option>';
        }
        $("select#municipality").html(options);
        $('#municipality').val(selectedMuncipality);
        // show modal dialog or something in here....

        $('#modal').modal('show');
    },
    error: function () {
        // do error  stuff
    }
});

}

我可能会也可能不会为您的问题提供准确的解决方案。因为它不是一个行代码或另一个知道概率，除非你有实际的环境运行。   请注意我只是猜测你的代码。希望它能帮到你

我已按照
对代码进行了更改

在执行下一行之前先完成getJSON请求

2 个答案: