我的數據庫表中有兩個類別。女性時尚與男性時尚在男裝下，我有男鞋在 Women fashion 下，我有 Female bag我想要一個我將在 HTML 表單選擇中使用的 javascript，這樣當一個人選擇 Women Fashion 時，他/她將看到女性時尚下的項目列表，例如第二種形式的女包，或者當一個人選擇 Man Fashion 時，他/她將看到Men fashion 下的項目列表，例如第二種形式的 Men shoe。樣本<form class="form"> <div class="form-group"> <select id="box1" name="num"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <select id="box2" name="letters"> <option value="a">A</option> <option value="b">B</option> </select> </div></form>然后我有這個$("#box1").on('change', function () { var value = $(this).val(); if (value === "1" || value === "2") { $("#box2").show(); } else { $("#box2").hide(); }});但不知道如何使用數據庫值來實現它
1 回答
開滿天機
TA貢獻1786條經驗 獲得超13個贊
對此代碼應用干哲學
這只是一個測試，但它是您正在尋找的行為嗎？
HTML代碼
? ? <form class="form">
? <div class="form-group">
? ? <select id="collections" name="collection">
? ? ? <option>Select a value</option>
? ? ? <option value="man">Man</option>
? ? ? <option value="woman">Woman</option>
? ? </select>
? ? <select id="box2" name="collections-items">
? ? </select>
? </div>
</form>
JS代碼
let chooseCollections = document.querySelector('#collections')
let selectItems = document.querySelector('#box2')
let manCollection = {
? categories: ["Shoes", "Shirt"]
}
let womanCollection = {
? categories: ["Dress", "Shirt"]
}
chooseCollections.addEventListener('change', (e) => {
? selectItems.querySelectorAll('*').forEach(el => el.remove());
? selectItems.style.display = "none"
? if(e.target.value === "man") {
? ? selectItems.style.display = "block"
? ? for(let i = 0; i < manCollection.categories.length; i++) {
? ? ? var option = document.createElement('option')
? ? ? var value = manCollection.categories[i]
? ? ? option.value = value
? ? ? option.innerHTML = value
? ? ? selectItems.appendChild(option)
? ? }
? }
? if(e.target.value === "woman") {
? ? selectItems.style.display = "block"
? ? for(let i = 0; i < womanCollection.categories.length; i++) {
? ? ? var option = document.createElement('option')
? ? ? var value = womanCollection.categories[i]
? ? ? option.value = value
? ? ? option.innerHTML = value
? ? ? selectItems.appendChild(option)
? ? }
? }
})
CSS
#box2 {
? display: none;
}
我將 manCollection 和 womanCollection 表示為您數據庫中的數據。此代碼未優化，可以更高效，但您可以從它開始。
- 1 回答
- 0 關注
- 129 瀏覽
添加回答
舉報
0/150
提交
取消