如何給一個選項多個值並在不同的區域顯示這些值？

Question

所以我們有這個 html 表單活動，我想為產品賦予不同的值，然后自動填充表單的其他部分。

我希望 html 和 javascript 也有可能。

我只是一個想通過這個的學生，謝謝。

代碼：

 function myFunction() { var val = document.getElementById("Product").value; document.getElementById("Unit").innerHTML = val; }

 <select name="Product" onchange="myFunction()" id="Product"> <option selected=""> Choose Product...</option> <option value="SM01">Sugar & Moss</option> <option value="BF02">Black Fig</option> <option value="SR03">Sandalwood Rose</option> <option value="GC04">Golden Coast</option> <option value="PN05">Piñion</option> </select> <textarea id="Unit" readonly=""></textarea> <textarea id="Code" readonly=""></textarea> <textarea id="Price" readonly=""></textarea>

Answer 1

這是可能的，使用data屬性。 這些屬性用於向某個 HTML 節點添加信息。 有了這些，您可以定義要與所選選項關聯的數據，並在 select 更改時填寫表格。

請注意，此選項不適合大表格。 您不希望每個選項有 20 個數據字段。 在您可能需要填寫更多字段的情況下，我建議您保留具有不同值的 object 並從該 object 更新您的字段。 我將在下面介紹這一點。

首先，您需要將數據屬性添加到您的 html 表單中。 data 屬性以關鍵字data開頭，后跟名稱，用連字符分隔。

<select name="Product" onchange="myFunction()" id="Product">
              <option selected=""> Choose Product...</option>
              <!-- ... -->
              <option value="SR03" data-code="SF23" data-price="19.99">Sandalwood Rose</option>
              <!-- ... -->
            </select>

現在我們的數據已定義，我們可以在 Javascript 中的更改事件中捕獲它。 為此，我們可以在節點上使用dataset object

function myFunction() {
  const val = document.getElementById("Product").value;
  document.getElementById("Unit").innerHTML = val;
  
  // we use a querySelector to get the selected option
  const selectedOption = document.querySelector('#Product > option[selected] ');

  // from the dataset object, we get value for the selected option
  const price = selectedOption.dataset.price;
  const code = selectedOption.dataset.code;

  // we change the value of the text areas
  document.querySelector('#Code').innerHTML = code;
  document.querySelector('#Price').innerHTML = price;
}

如果您想使用 object，您可以使用選定的選項值作為 object 的鍵：

function myFunction() {
  // we define the prices and code here.
  const pricesAndCodes = {
     /** ... **/
     SM01: {
        price: '19.99',
        code: 'SF23'
     }
  }

  const val = document.getElementById("Product").value;
  document.getElementById("Unit").innerHTML = val;
  
  // we use a querySelector to get the selected option
  const selectedOption = document.querySelector('#Product > option[selected] ').value;

  

  const selectedPriceAndCodes = pricesAndCodes[selectedOption.value]

  // we change the value of the text areas
  document.querySelector('#Code').innerHTML = selectedPriceAndCodes.code;
  document.querySelector('#Price').innerHTML = selectedPriceAndCodes.price;
}

以下是工作示例：

使用數據屬性：

 function myFunction() { const val = document.getElementById("Product").value; document.getElementById("Unit").innerHTML = val; // we use a querySelector to get the selected option const selectedOption = document.querySelector('#Product > option[value="' + val + '"] '); // from the dataset object, we get value for the selected option const price = selectedOption.dataset.price; const code = selectedOption.dataset.code; // we change the value of the text areas if(price && code ) { document.querySelector('#Code').innerHTML = code; document.querySelector('#Price').innerHTML = price; } }

 <select name="Product" onchange="myFunction()" id="Product"> <option selected=""> Choose Product...</option> <option value="SM01" data-code="1" data-price="19.22">Sugar & Moss</option> <option value="BF02" data-code="2" data-price="20.22">Black Fig</option> <option value="SR03" data-code="3" data-price="21.22">Sandalwood Rose</option> <option value="GC04" data-code="4" data-price="23.22">Golden Coast</option> <option value="PN05" data-code="5" data-price="40.22">Piñion</option> </select> <textarea id="Unit" readonly=""></textarea> <textarea id="Code" readonly=""></textarea> <textarea id="Price" readonly=""></textarea>

使用 object

 function myFunction() { // we define the prices and code here. const pricesAndCodes = { /**... **/ SM01: { price: '20.99', code: '1' }, BF02: { price: '32.99', code: '2' }, SR03: { price: '23.99', code: '3' }, GC04: { price: '53.99', code: '4' }, PN05: { price: '42.99', code: '5' } } const val = document.getElementById("Product").value; document.getElementById("Unit").innerHTML = val; const selectedPriceAndCodes = pricesAndCodes[val] // we change the value of the text areas document.querySelector('#Code').innerHTML = selectedPriceAndCodes.code; document.querySelector('#Price').innerHTML = selectedPriceAndCodes.price; }

 <select name="Product" onchange="myFunction()" id="Product"> <option selected=""> Choose Product...</option> <option value="SM01" data-code="1" data-price="19.22">Sugar & Moss</option> <option value="BF02" data-code="2" data-price="20.22">Black Fig</option> <option value="SR03" data-code="3" data-price="21.22">Sandalwood Rose</option> <option value="GC04" data-code="4" data-price="23.22">Golden Coast</option> <option value="PN05" data-code="5" data-price="40.22">Piñion</option> </select> <textarea id="Unit" readonly=""></textarea> <textarea id="Code" readonly=""></textarea> <textarea id="Price" readonly=""></textarea>

PS您應該始終依靠您的后端來最終驗證數據。 用戶可以更改 Javascript，因此永遠不要相信用戶發送給您的內容。 祝你好運 ！