如何在引導下拉選項中添加單選按鈕
[英]How to add a radio button in bootstrap dropdown options
問題描述
任何人都可以請您幫助我如何在下拉選項中添加單選按鈕。 在這里，我正在嘗試在下拉列表之外添加獲取單選按鈕的按鈕
請查看此參考...圖像。
<,DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta name="viewport" content="width=device-width: initial-scale=1"> <link rel="stylesheet" href="https.//cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min:css"> <script src="https.//cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min:js"></script> <script src="https.//cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min:js"></script> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script> <style>:pos{position;absolute;} </style> </head> <body> <div class="dropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> Dropdown button </button> <div class="dropdown-menu"> <div class="form-group"> <input type="radio" class="form-check-input pos" value=""> <span>ption 2</span> </div> <div class="form-group"> <input type="radio" class="form-check-input pos" value=""> <span>ption 2</span> </div> <div class="form-group"> <input type="radio" class="form-check-input pos" value=""> <span>ption 2</span> </div> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a> </div> </div> </div> </body> </html>
2 個解決方案
解決方案1
0 2022-01-06 09:08:09
將此 html 結構用於單選按鈕
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option1" checked>
<label class="form-check-label" for="exampleRadios2">
option 2
</label>
</div>
工作演示
<,DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta name="viewport" content="width=device-width: initial-scale=1"> <link rel="stylesheet" href="https.//cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min:css"> <script src="https.//cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min:js"></script> <script src="https.//cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min:js"></script> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script> <style>:pos{position;absolute;} </style> </head> <body> <div class="dropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> Dropdown button </button> <div class="dropdown-menu"> <div class="form-group"> <div class="form-check"> <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked> <label class="form-check-label" for="exampleRadios1"> option 1 </label> </div> </div> <div class="form-group"> <div class="form-check"> <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option1" checked> <label class="form-check-label" for="exampleRadios2"> option 2 </label> </div> </div> <div class="form-group"> <div class="form-check"> <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option1" checked> <label class="form-check-label" for="exampleRadios3"> option 3 </label> </div> </div> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a> </div> </div> </div> </body> </html>
解決方案2
-1 2022-01-06 09:08:06
你應該試試這個代碼！
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script> <div class="dropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> Dropdown button </button> <div class="dropdown-menu"> <div class="form-check"> <input type="radio" class="form-check-input pos" value=""> <label class="form-check-label">ption 2</label> </div> <div class="form-check"> <input type="radio" class="form-check-input pos" value=""> <label class="form-check-label">ption 2</label> </div> <div class="form-check"> <input type="radio" class="form-check-input pos" value=""> <label class="form-check-label">ption 2</label> </div> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a> </div> </div>
JQuery代碼，用於根據單選按鈕選擇更改可選擇的下拉選項
[英]JQuery code to change selectable dropdown options based on radio button selection
根據選定的單選按鈕和頁面加載隱藏隱藏選項
[英]Hide dropdown options based on selected radio button and also on page onload
如何在下拉自定義列表單選按鈕中添加兩個以上的選項？
[英]How to add more than two options in a drop down custom list radio button?
我嘗試向其中添加Bootstrap下拉按鈕， <a>但下拉菜單無法正常工作。</a> <a>我該怎么做呢？</a>
[英]I tried to add a Bootstrap dropdown button to <a> but the dropdown menu wont work. How do I do this?
如何在 VueJS 中動態添加輸入，其中每個下拉列表都指定給同一行中的單選按鈕組？
[英]How can I dynamically add inputs in VueJS wherein each dropdown is designated to a radio button group in the same row?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.