我不知道如何正確地問這個問題。如何根據選定的下拉選單進行輸入更改？
我是編碼新手。我正在嘗試創建一個帶有下拉選單的表單，該表單為捐贈頁面預先選擇了一些資訊。我的表單中唯一可以接受的欄位是：TRACKING_CODE、AFUND1 和 AGIFT_AMOUNT1。（AFUND1 到 AFUND30 和 AGIFT_AMOUNT1- AGIFT_AMOUNT30）
我創建了一個帶有選項的下拉選單，但是如何使輸入更改為相應的 AFUND# 和 AGIFT_AMOUNT#（AFUND1 到 AFUND4 和 AGIFT_AMOUNT1- AGIFT_AMOUNT4）？
<form id="donation-form" action="PaymentTransfer.aspx" class="gift-form" method="post">
<input name="TRACKING_CODE" type="hidden" value="23385966">
<div>
<select id="funds-list" class="">
<option value="" disabled="disabled" selected="selected">Choose a fund</option>
<option value="1140742/College of Business Scholarship Fund">College of Business Scholarship Fund
</option>
<option value="114177/College of Business Faculty Excellence Fund">College of Business Faculty Excellence Fund</option>
<option value="113119/College of Business Innovation Fund">College of Business Innovation Fund
</option>
<option value="113119/College of Business Annual Fund">College of Business Annual Fund
</option>
<option value="113014/College of Business Emergency Scholarship Fund">College of Business Emergency Scholarship Fund</option>
</select>
</div>
<div class="giving-fund-input-wrapper">
<span class="giving-fund-input-prefix" role="presentation">
$
</span>
<input type="hidden" name="AFUND1" value="1140742/College of Business Scholarship Fund">
<input class="giving-fund-input" id="fund-1140742" type="number" min="5" name="AGIFT_AMOUNT1" label="gift dollar amount for College of Business Scholarship Fund">
</div>
<input type="submit" value="Continue">
</form>uj5u.com熱心網友回復：
您可以在選項中使用自定義資料屬性，見下文：data-AFUND 和 data-AGIFT
<form id="donation-form" action="PaymentTransfer.aspx" class="gift-form" method="post">
<input name="TRACKING_CODE" type="hidden" value="23385966">
<div>
<select id="funds-list" class="">
<option value="" disabled="disabled" selected="selected">Choose a fund</option>
<option value="1140742/College of Business Scholarship Fund" data-AFUND="AFUND1" data-AGIFT="AGIFT_AMOUNT1">College of Business Scholarship Fund
</option>
<option value="114177/College of Business Faculty Excellence Fund" data-AFUND="AFUND2" data-AGIFT="AGIFT_AMOUNT2">College of Business Faculty Excellence Fund</option>
<option value="113119/College of Business Innovation Fund" data-AFUND="AFUND3" data-AGIFT="AGIFT_AMOUNT3">College of Business Innovation Fund
</option>
<option value="113119/College of Business Annual Fund" data-AFUND="AFUND4" data-AGIFT="AGIFT_AMOUNT4">College of Business Annual Fund
</option>
<option value="113014/College of Business Emergency Scholarship Fund" data-AFUND="AFUND5" data-AGIFT="AGIFT_AMOUNT5">College of Business Emergency Scholarship Fund</option>
</select>
</div>
<div class="giving-fund-input-wrapper">
<span class="giving-fund-input-prefix" role="presentation">
$
</span>
<input id="hidden-fund-input" type="hidden" name="AFUND1" value="1140742/College of Business Scholarship Fund">
<input class="giving-fund-input" id="fund-1140742" type="number" min="5" name="AGIFT_AMOUNT1" label="gift dollar amount for College of Business Scholarship Fund">
</div>
<input type="submit" value="Continue">
</form>
然后我們可以在選擇新選項時使用 javascript 來更改輸入值。
const fundList = document.getElementById('funds-list');
const hiddenFundInput = document.getElementById('hidden-fund-input');
const givingFundInput = document.getElementById('fund-1140742');
// when a new option is selected
fundList.onchange = function(e) {
// get the option that is currently selected
let selectedOption = fundList.options[fundList.selectedIndex];
// get the data- attributes that was set in the HTML and
// assign to the inputs
hiddenFundInput.name = selectedOption.getAttribute('data-AFUND');
hiddenFundInput.value = selectedOption.value;
givingFundInput.name = selectedOption.getAttribute('data-AGIFT');
}
Jsfiddle 演示
uj5u.com熱心網友回復：
因此，當您更改下拉串列時，您會得到selectedIndex用于將 2 個輸入重命名為所需（？）名稱的下拉串列。
var list = document.querySelector("#funds-list");
list.addEventListener("change", function(ev) {
var index = list.selectedIndex
var value = list.value;
var text = list.options[index].innerText
var fund = document.querySelector("[data-fund=true]");
var amount = document.querySelector("[data-amount=true]");
fund.setAttribute('name', 'AFUND' index)
amount.setAttribute('name', 'AGIFT_AMOUNT' index)
fund.value = value;
amount.title = text;
console.log(`renamed to AFUND${index} and AGIFT_AMOUNT${index}`)
})<form id="donation-form" action="PaymentTransfer.aspx" class="gift-form" method="post">
<input name="TRACKING_CODE" type="hidden" value="23385966">
<div>
<select id="funds-list" class="">
<option value="" disabled="disabled" selected="selected">Choose a fund</option>
<option value="1140742/College of Business Scholarship Fund">College of Business Scholarship Fund
</option>
<option value="114177/College of Business Faculty Excellence Fund">College of Business Faculty Excellence Fund</option>
<option value="113119/College of Business Innovation Fund">College of Business Innovation Fund
</option>
<option value="113119/College of Business Annual Fund">College of Business Annual Fund
</option>
<option value="113014/College of Business Emergency Scholarship Fund">College of Business Emergency Scholarship Fund</option>
</select>
</div>
<div class="giving-fund-input-wrapper">
<span class="giving-fund-input-prefix" role="presentation">$</span>
<input data-fund="true" type="hidden" name="AFUND1" value="1140742/College of Business Scholarship Fund">
<input data-amount="true" class="giving-fund-input" id="fund-1140742" type="number" min="5" name="AGIFT_AMOUNT1" title="gift dollar amount for College of Business Scholarship Fund">
</div>
<input type="submit" value="Continue">
</form>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/513580.html