我需要一些幫助。我的批號正確填充為“選擇”欄位中的選項。
我需要一些幫助來撰寫代碼，以便現在根據 API 中的批號自動填充到期日期值。我知道它可能會使用“this”，以便從該特定物件獲取資料（以及更新選擇選項時的更改），但我很生疏，正在努力重繪 我的記憶以了解如何去做。
如果您需要我提供更多資訊，請告訴我，并提前感謝您的幫助！
// ====== PRODUCT LOT NUMBER API
function populateOptions(itemData) {
const item = $('<option>').append(itemData.ProductLot);
$('.lotNumbers').append(item);
console.log(item);
}
// Need to write function for autofilling next fields
// On option select get this object's expiration date & vial size values
// Update .expDate and .vialSize input value to this objects values
const apiKey = "xxxxxxxxx";
$(function () {
$.ajax({
url: "https://staging.azurewebsites.net/prd_ret_service/api/ProductLots",
type: "GET",
dataType: "json",
headers: { "APIkey": apiKey },
success: function (data) {
data.ProductLot.forEach(populateOptions);
}
});
});
<select class="lotNumbers select__input form-control" name="product[0][lotNumber]"
id="product[0][lotNumber]" required>
<option value="" disabled selected>Lot Number</option>
</select>
<div class="floating-label margin-bottom-sm form-group col-3@sm">
<label class="form-label color-primary " for="product[0][expirationDate]">Expiration Date</label>
<input class="expDate form-control width-100% date-input js-date-input"
placeholder="Expiration Date" type="text" name="product[0][expirationDate]"
id="product[0][expirationDate]" required autocompelete="on" maxlength="254">
<div role="alert" class="form-error-msg">
<p>Please enter a valid expiration date.</p>
</div>
</div>
<div class="floating-label margin-bottom-sm form-group col-2@sm">
<label class="form-label color-primary " for="product[0][vialSize]">Vial Size</label>
<input class="form-control width-100%" placeholder="Vial Size" type="text"
name="product[0][vialSize]" id="product[0][vialSize]" required autocompelete="on"
maxlength="254">
<div role="alert" class="form-error-msg">
<p>Please enter a valid vial size.</p>
</div>
</div>
API 結構示例：
[
{
"Id": 1,
"Product": "sample string 2",
"ProductLot": "sample string 3",
"ExpirationDate": "2022-10-20T13:53:32.3636843 00:00"
},
{
"Id": 1,
"Product": "sample string 2",
"ProductLot": "sample string 3",
"ExpirationDate": "2022-10-20T13:53:32.3636843 00:00"
}
]
uj5u.com熱心網友回復：
您希望將一個change事件與select元素聯系起來，該事件將獲取所需的 API 資料，并使用它來填充過期日期等。像這樣的東西......
$('.lotNumbers').change( event => {
const chosenLotNumber = event.currentTarget.value;
$.ajax({
// etc etc
} );
} );
如果您的 API 密鑰是私有的（公開私有資料，或允許更改不打算由公眾更改的資料），您將希望改為使用服務器端代碼進行 API 呼叫，并讓您的 javascript 對話到您的服務器端代碼以獲取資料。這樣您的密鑰就不會暴露，但您仍然可以通過 javascript ajax 呼叫獲取資料。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/522453.html
上一篇：如何填寫表格“a”并自動填寫表格“b”而不顯示給用戶？
下一篇：讓我的“標題”文本顯示在導航欄上