单选按钮扩展到下拉菜单以获得更多选项

Question

我有几个单选按钮用于选择常用选项，其余的进入称为其他选项的下拉列表。因此，用户只能从下拉菜单或单选按钮中选择一个选项。选择一个选项后，其余选项将消失（已实现）。我想不通的是如何使下拉菜单作为单选按钮的一部分工作？？

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/987654322@ 中选择值时，也会选中更新的答案单选按钮

我删除了按钮标签，我正在使用 input 和 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

$(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);
    });
});

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