欄位 1 [attribute_size]
下拉選單值：小、中、大、特大
欄位 2 [count]
輸入文本值：根據欄位 1 輸入設定值，基于以下映射
小號 = 1
中號 = 2
大號 = 3
特大號 = 4
<select id="size" class="" name="attribute_size" data-attribute_name="attribute_size" data-show_option_none="yes"><option value="">Choose an option</option><option value="Small" class="attached enabled">Small</option><option value="Medium" class="attached enabled">Medium</option><option value="Large" class="attached enabled">Large</option><option value="Extra Large" class="attached enabled">Extra Large</option></select>
<input id="count" name="count" value="5" class="thwepo-input-field ">
我如何使用 JQuery 來實作這一點？每次更改欄位 1 時，我都需要更新欄位 2 的值。
uj5u.com熱心網友回復：
您將在設定 的 上設定一個事件處理change程式：selectvalueinput
const $input = $("#size");
$input.change(function(){
$("#count").val($(this).val());
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="size" class="" name="attribute_size" data-attribute_name="attribute_size" data-show_option_none="yes">
<option value="">Choose an option</option>
<option value="1" class="attached enabled">Small</option>
<option value="2" class="attached enabled">Medium</option>
<option value="3" class="attached enabled">Large</option>
<option value="4" class="attached enabled">Extra Large</option>
</select>
<input id="count" name="count" value="5" class="thwepo-input-field ">但是，關于這件事有幾點：
input欄位就是這樣，用戶輸入的元素。如果您只需要顯示資訊，則不應使用input元素，而應僅設定textContent普通元素的 （如 aspan或div）。如果你希望
valuean的 與 的 文本option相同，則根本不需要指定 的屬性——文本將成為值。但是，在您的情況下，您已經說過您希望數字是不同s 的值，因此屬性應該反映這一點。optionvalueoptionoptionvalue您所詢問的場景非常簡單，而 JQuery 可能無法完成它。下面是 vanilla JavaScript 的代碼：
const input = document.getElementById("count");
document.getElementById("size").addEventListener("change", function(){
input.value = this.value;
});<select id="size" class="" name="attribute_size" data-attribute_name="attribute_size" data-show_option_none="yes">
<option value="">Choose an option</option>
<option value="1" class="attached enabled">Small</option>
<option value="2" class="attached enabled">Medium</option>
<option value="3" class="attached enabled">Large</option>
<option value="4" class="attached enabled">Extra Large</option>
</select>
<input id="count" name="count" value="5" class="thwepo-input-field ">轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/475702.html
標籤：javascript jQuery