Question

如何使用html required属性验证（即make required）引导分割按钮下拉菜单？

下面是bootstrap split button下拉代码：

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

由于没有直接选择html标签，因此无法使用按钮。那么，如何添加引导分割按钮下拉列表所需。

由于

Answer 1

您可以设置分割按钮更改的值，如下所示：

$(".dropdown-menu li a").click(function(){
    $(".btn:first-child").text($(this).text());
    $(".btn:first-child").val($(this).text());
});

您可以通过以下行

获取分割按钮的选定值

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

并根据您的要求进行验证。

Answer 2

这是一个可以解决你的问题，只需要在5分钟内完成任务，你需要通过一些css来修复按钮的不同。

<!DOCTYPE html>
<html>
<head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
    </script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
    </script>
    <title></title>
</head>
<body>
    <div class="btn-group">
        <a class="btn btn-danger" href="http://google.com" type="button">Action</a> <button aria-expanded="false" aria-haspopup="true" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span> <span class="sr-only">Toggle Dropdown</span></button>
        <ul class="dropdown-menu">
            <li>
                <a href="#">Action</a>
            </li>
            <li>
                <a href="#">Another action</a>
            </li>
            <li>
                <a href="#">Something else here</a>
            </li>
            <li class="divider" role="separator"></li>
            <li>
                <a href="#">Separated link</a>
            </li>
        </ul>
    </div>
</body>
</html>

Answer 3

感谢大家的回复。

我使用HTML和jquery代码实现了它。我的情景是这样的;如果文本框为空，则SELECT（拆分下拉列表）成为必需项，反之亦然。

我添加了<select id="splitBtnBreakFree" style="display:none"></select>然后根据我的场景在我的jquery代码中，我在下面的代码中写道：

$("#splitBtnBreakFree").removeAttr("required");
if($("#breakFeeAmount").val() != "" && $("#btnActionOfFessValue").text() == "Select an option"){
   $("#splitBtnBreakFree").prop("required",true);
}

我希望这可以帮助某人。

问候＆amp;谢谢，

Owais

验证具有html必需属性的拆分按钮下拉引导程序

3 个答案: