我有一個表格，有 3 種選擇，例如顏色如下： <form action="{{ route('shop.products.index', $product->url_key) }}" method="get"> <select name="color_id"> <option value="1">black</option> <option value="2">brown</option> <option value="3">white</option> </select> <input type="submit" value="send"></form> 現(xiàn)在我不想選擇帶有選項的選項，而是放置 3 個黑棕色和白色的圓圈，當用戶單擊每個圓圈時，將提交帶有該值的表單。有什么辦法嗎？
4 回答
鴻蒙傳說
TA貢獻1865條經(jīng)驗 獲得超7個贊
替換<select>為<input type="radio">.
所以你會得到類似的東西：
<input type="radio" name="color_id" value="1" /> <img src="some_black_circle.jpg" />
<input type="radio" name="color_id" value="2" /> <div class="css_brown_circle"></div>
<input type="radio" name="color_id" value="3" /> <img src="some_white_circle.jpg" />
<input type="submit" value="send">
30秒到達戰(zhàn)場
TA貢獻1828條經(jīng)驗 獲得超6個贊
大多數(shù)人認為你可以用 css 來做到這一點。確保使用標簽。在其中使用圓形邊框，然后增加它的半徑。
否則你可以再次使用圖像標簽和CSS。
夢里花落0921
TA貢獻1772條經(jīng)驗 獲得超6個贊
好的，你可以嘗試這樣的事情。selectColor 函數(shù)將設置選擇字段值，并且它將在視圖中保持隱藏狀態(tài)。div 代表您的圓圈，您可以單擊它來設置選擇字段。
<form id="theForm">
<div>
<div class="black" onclick="selectColor(1)"></div>
<div class="brown" onclick="selectColor(2)"></div>
<div class="white" onclick="selectColor(3)"></div>
</div>
<select name="color_id" style="visiblity:hidden" id="color_id">
<option value="1">black</option>
<option value="2">brown</option>
<option value="3">white</option>
</select>
</form>
<script>
selectColor(color){
document.getElementById('theForm').submit(); // Submit form
document.getElementById('color_id').value = color;
}
</script>
眼眸繁星
TA貢獻1873條經(jīng)驗 獲得超9個贊
要創(chuàng)建圓圈，請使用<label>每個輸入的元素?？梢栽O置此標簽的樣式，使其顯示一個圓圈作為選項。輸入本身可以隱藏，display: none只顯示標簽。如果輸入位于標簽內(nèi)，則單擊時將觸發(fā)輸入的更改。
使用 JavaScript，偵聽change表單內(nèi)的事件。每當輸入的值（或選擇）發(fā)生更改時，就會發(fā)生更改事件。然后用該方法手動觸發(fā)表單提交.submit()。
const form = document.querySelector('form');
form.addEventListener('change', function(event) {
form.submit();
});
form {
display: flex;
width: 100%;
}
.circle {
display: block;
width: 25px;
height: 25px;
border-radius: 50%;
border: 1px solid #d0d0d0;
margin: 0 5px;
cursor: pointer;
}
.circle input {
display: none;
}
.black {
background-color: black;
}
.brown {
background-color: brown;
}
.white {
background-color: white;
}
<form>
<label class="circle black">
<input type="radio" name="color_id" value="black">
</label>
<label class="circle brown">
<input type="radio" name="color_id" value="brown">
</label>
<label class="circle white">
<input type="radio" name="color_id" value="white">
</label>
</form>
- 4 回答
- 0 關注
- 200 瀏覽
添加回答
舉報
0/150
提交
取消