Question

我需要将单选按钮和选择框组合在一起。是否有任何内置框架可以做到这一点？我尝试了一个代码，但它不是一种简单的代码方式。下面我给出了代码部分的输出

这里，Class和lab是单选按钮，它们附带一个选择框。但是我的代码有错误。下面我给出了代码：

<div class="btn-group" data-toggle="buttons">
<label class="btn btn-cyan btn-rounded form-check-label">
<label class="btn btn-cyan btn-rounded form-check-label" style="padding: 5px 5px 5px 5px;">
    <input class="form-check-input" type="radio" autocomplete="off"> Class
</label>

<label class="btn btn-cyan btn-rounded form-check-label" style="padding: 5px 5px 5px 5px;">
    <input class="form-check-input" type="radio" autocomplete="off"> Lab
</label>
    <select class="form-check-input" autocomplete="off"> <option>HELLO</option><option>HELLO</option><option>HELLO</option></select>
</label>
 </div>

这里，select成了一个按钮，因为我使用了类btn.Please帮我修复代码。他们的任何替代东西是否已经存在（组合单选按钮和选择框）

Answer 1

尝试以下代码段。点击一个值后，它将参考javascript中的列表并将其发布到选择选项。这些值根据每个单选按钮而变化。

您可以通过大写和简单的单词以及单击单击按钮上的更改方式进行识别。

干杯

var listA = [{
  name: 'hello',
  value: 'hello'
}, {
  name: 'hi',
  value: 'hi'
}, {
  name: 'test',
  value: 'test'
}];

var listB = [{
  name: 'HELLO',
  value: 'HELLO'
}, {
  name: 'HI',
  value: 'HI'
}, {
  name: 'TEST',
  value: 'TEST'
}];

$(document).ready(function() {
  $("input[name='chk']").on('change', function() {

    if ($(this).is(':checked') && $(this).val() == 'hello') {
      $('#describe').empty()
      $.each(listA, function(index, value) {
        $('#describe').append('<option value="' + value.value + '">' + value.name + '</option>');
      });
    } else if ($(this).is(':checked') && $(this).val() == 'HELLO') {
      $('#describe').empty()
      $.each(listB, function(index, value) {
        $('#describe').append('<option value="' + value.value + '">' + value.name + '</option>');
      });
    } else {

    }

  });
});

  .radioBtn {
  position: absolute;
  margin: 0;
  opacity: 0;

}

.radioBtn:before {
  content: '';
  position: absolute;
  top: -10px;
  bottom: -10px;
  left: -10px;
  right: -10px;
  cursor: pointer;
 
}

#describe{
  margin-left:10px
}

.lbl{
  display:block;
  padding:5px;
  background-color:#ccc;

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label class="btn btn-cyan btn-rounded form-check-label" style="padding: 5px 5px 5px 5px;">
     <input type="radio" id="class" class="radioBtn" name="chk" value="hello"><label class="lbl"> Class</label>
</label>

  <label class="btn btn-cyan btn-rounded form-check-label" style="padding: 5px 5px 5px 5px;">
      <input type="radio" class="radioBtn" id="Club" name="chk" value="HELLO" ><label class="lbl"> Lab </label>
</label>

  <select id="describe" class="form-check-input" autocomplete="off"> 
      <option name="name" value="1">a</option>
      <option name="name" value="2">b</option>
    </select>

如何使用引导程序将单选按钮与选择框组合在一起

1 个答案: