Question

我没有几个用于选择常用选项的单选按钮，其余按钮进入一个名为“其他”的下拉列表。因此，用户只能从下拉列表或单选按钮中选择一个选项。选择一个选项后，其余选项将消失（已实施）。我无法弄清楚如何使下拉工作作为radiobutton的一部分??

HTML：

<form>
  <group class="inline-radio">

    <div>
      <input id="opt1" type="radio" name="title">
      <label>opt1</label>
    </div>
    <div>
      <input id="opt2" type="radio" name="title">
      <label>opt2</label>
    </div>
    <div>
      <input id="opt3" type="radio" name="title">
      <label>opt3</label>
    </div>
    <div>
      <input id="opt4" type="radio" name="title">
      <label>opt4</label>
    </div>

    <!-- DropDown -->
    <div class="dropdown drop-hide">
      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        Others
        <span class="caret"></span>
      </button>
      <ul style="clear:both" class="dropdown-menu" aria-labelledby="dropdownMenu1">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>
    <!-- DropDown End-->

  </group>
  <span class="tip">Please choose one</span>

</form>

的javascript：

  //for toggling  
    var hid = false;

    $("group.inline-radio").click(function() {
      if (hid == false) {

        $('group.inline-radio').find('input[type="radio"]').not(':checked').parent().hide().find('label').hide();
       hid = true;
        return;
      } else {
        $('group.inline-radio').find('input[type="radio"]').not(':checked').parent().show().find('label').show();

        hid = false;
      }

    });


    $("input:radio[name=title]").click(function() {

      var id = $(this).attr('id');
      var value;
      var value;
      $("input:radio[name=title]")
      switch (id) {
        case "opt1":
          value = "opt1";
          break;
        case "opt2":
          value = "opt2";
          break;
        case "opt3":
          value = "opt3";
          break;
        case "opt4":
          value = "opt4";
          break;
        case "opt5":
          value = "opt5";
          break;
        case "opt6":
          value = "opt6";
          break;
        case "opt7":
          value = "opt7";
          break;

        default:
          value = "Please choose an option";
      }
      $("span.tip").text(value);

    });

    //for dropdown

    $(function() {

      $(".dropdown-menu li a").click(function() {

        $(".btn:first-child").text($(this).text());
        $(".btn:first-child").val($(this).text());

      });

    });

这里有一个更清晰的图片是codepen中的项目。 http://codepen.io/flyingboy007/pen/wKpWoY

Answer 1

请参阅此示例：http://jsfiddle.net/kevalbhatt18/7ntgay11/2/

现在更新了答案当您从http://jsfiddle.net/kevalbhatt18/7ntgay11/

分组中选择值时，也会选中单选按钮

我删除了按钮标签，我正在使用输入和type =“radio”可能会帮助你

的

的
<div class="dropdown drop-hide"> <input id="opt5" class="btn btn-default dropdown-toggle" type="radio" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" name="title"> <label>opt5</label> <ul style="clear:both" class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li><a href="#">Separated link</a></li> </ul> </div>

的

Answer 2

您似乎可能希望从菜单下拉菜单更改为选择下拉列表。

jsfiddle working example

＆＃13;

$(function() {
    var radio = $(".inline-radio input[name='title']");
    var select = $(".inline-radio select");
    var tip = $("span.tip");
    select.on('change', function() {
        var option = $(this).find(":selected").text();
        $('#' + option).prop('checked',true);
        tip.text(option);
    });
    radio.on('change', function() {
        var option = $(this).attr('id');
        select.val(option);
        tip.text(option);
    });
});

＆＃13;

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<form>
  <group class="inline-radio">
    <div>
      <input id="opt1" type="radio" name="title" checked="checked" />
      <label>opt1</label>
    </div>
    <div>
      <input id="opt2" type="radio" name="title" />
      <label>opt2</label>
    </div>
    <div>
      <input id="opt3" type="radio" name="title" />
      <label>opt3</label>
    </div>

    <select class="form-control">
      <option>opt1</option>
      <option>opt2</option>
      <option>opt3</option>
    </select>

  </group>
  <span class="tip">Please choose one</span>

</form>

＆＃13;

单选按钮扩展到下拉列表以获取更多选项

2 个答案: