Question

感谢Stackoverflow的有用用户，我正在慢慢地使用JQuery，但我遇到了一个我似乎无法找到解决方案的新问题。

我有以下JQuery函数：

$(function () {
    $(document).tooltip();
    $("#eventLocation").on("change", function (e) {
        $.getJSON("/common/ajaxCalls.php?task=locationEdit&eventLocation=" + $("#eventLocation").val(),

        function (data) {
            $.each(data, function (i, item) {
                if (item.field == "name") {
                    $("#name").val(item.value);
                } else if (item.field == "address") {
                    $("#address").val(item.value);
                } else if (item.field == "postcode") {
                    $("#postcode").val(item.value);
                } else if (item.field == "directions") {
                    $("#directions").val(item.value);
                }
            });
        });
    });
});

根据JSON查询更新以下表单的内容：

<label for="eventLocation">Event Location:</label><select name="eventLocation" id="eventLocation">
<option value="5">Buckstone</option>
<option value="18">Sandiways: Begg</option>
<option value="16">Wing Drumble Wood</option>
<option value="17" selected></option>
<option value="19" selected></option>
<option value="20">Pwll Du</option>
<option value="21" selected></option>
<option value="22">Kinver Edge</option>
<option value="23">Sandiways: Lakeview</option>
<option value="24">Gladstone</option>
<option value="25">Cannock Chase</option>
<option value="26" selected></option>
<option value="27">Consall Scout camp</option>
<option value="28">Broadwater</option>
<option value="29">Horley</option>
<option value="30">Blackwell Court</option>
<option value="31">Roddlesworth, Lancs</option>
<option value="32">Root 'n' Branch </option>
</select></p>
<form method="post" action="/heroes-and-heroines-larp-and-lrp-events.php?task=commitLocationEdit">
<p><label for="name">Location Name:</label><input type="text" name="name" id="name" class="wideText"></p>
<p><label for="address">Location Address:</label><textarea name="address" id="address" rows="6" cols="50"></textarea></p>
<p><label for="postcode">Location postcode:</label><input type="text" name="postcode" id="postcode"></p>
<p><label for="directions">Directions to Location:</label><textarea name="directions" id="directions" rows="10" cols="50"></textarea></p>
<p><label for="locationType">Location Type:</label><select name="locationType" id="locationType"><option value="YHA">YHA</option>
<option value="Hostel">Hostel</option><option value="Campsite">Campsite</option>
<option value="Scout Camp (Building)">Scout Camp (Building)</option><option value="Scout Camp (Camping)">Scout Camp (Camping)</option>
<option value="8 Hour">8 Hour</option><option value="Other">Other</option>
</select></p>
<p><label for="googleMapLink">Google Map Link:</label><textarea name="googleMapLink" rows="6" cols="50" title="To get a Google Maps Link, go to www.maps.google.co.uk, find the location, and then click on the tiny gear icon in the bottom right of the screen. Click 'Share and Embed Map', choose the 'Embed Map' tab, select 'Small Map' and then copy and paste the code into this box"></textarea></p>
<p><label for="notes">Notes:</label><textarea name="notes" rows="10" cols="50"></textarea></p>
<button type="submit" class="eventBookButton">Edit Location</button>
<a href="/heroes-and-heroines-larp-and-lrp-events.php"><input type="button" class="eventBookButton" value="Cancel" /></a>
</form>

我需要的是能够根据JSON数据更新第二个SELECT字段（“#locationType”）中的“selected”选项，所以我需要JQuery来仔细阅读SELECT #locationType，找到匹配的选项JSON数据，例如

{"field":"","Type":"Hostel"}

然后将选项设置为“已选择”。我已经找到了大量用JSON数据填充SELECT的方法，但似乎无法解决如何使用JSON数据设置选项...

有人可以帮忙吗？我仍在围绕JQuery包围我的大脑，所以请慢慢说话并使用简短的词......：）

谢谢！

Answer 1

您可以使用以下代码为locationType选择框设置值，也可以为匹配选项设置selected属性：

$(function () {
    $(document).tooltip();
    $("#eventLocation").on("change", function (e) {
        $.getJSON("/common/ajaxCalls.php?task=locationEdit&eventLocation=" + $("#eventLocation").val(),

        function (data) {
            $.each(data, function (i, item) {
                if (item.field == "name") {
                    $("#name").val(item.value);
                } else if (item.field == "address") {
                    $("#address").val(item.value);
                } else if (item.field == "postcode") {
                    $("#postcode").val(item.value);
                } else if (item.field == "directions") {
                    $("#directions").val(item.value);
                }
                else if (item.field == "Type") {
                    // set location type
                    $("#locationType").val(item.value);
                    // OR set 'selected' attribute using below code
                    //$("#locationType option[value="+item.value+"]").attr('selected',true); 
                }
            });
        });
    });
});

使用JQuery动态更改SELECT中的Selected项

1 个答案: