如何在引导下拉选项中添加单选按钮答案

【问题标题】：How to add a radio button in bootstrap dropdown options如何在引导下拉选项中添加单选按钮
【发布时间】：2022-01-06 08:55:11
【问题描述】：

任何人都可以请您帮助我如何在下拉选项中添加单选按钮。在这里，我正在尝试在下拉列表之外添加按钮获取单选按钮

请查看此参考...图片。

<!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>

【问题讨论】：

标签： javascript html jquery css twitter-bootstrap-3

【解决方案1】：

将此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】：

你应该试试这个代码！

 <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>

【讨论】：

虽然这段代码可以回答这个问题，但最好在不介绍其他代码的情况下解释它是如何解决问题的，以及为什么要使用它。从长远来看，纯代码的答案没有用。见this meta question
先生，谢谢您，但选项值应显示在下拉按钮中，请告诉我该怎么做。
对不起，我没有明白你想要什么。