驗證拆分按鈕的下拉引導與HTML需要屬性

如何使用HTML必需屬性驗證（即使需要）的引導分割按鈕下拉列表？驗證拆分按鈕的下拉引導與HTML需要屬性

下面是引導拆分按鈕的下拉列表中的代碼：

<!-- 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標籤，並不能要求按鈕。那麼，如何添加所需的引導分割按鈕下拉菜單。

感謝

來源

2017-02-09 Owais

* 「沒有直接選擇HTML標籤」 *所以加這樣的事情。使用一點JS，綁定select和required來分離按鈕並使它們共享驗證狀態相當容易。 – dfsq

好吧。你的意思是我添加了一個隱藏的「select」標籤，當用戶選擇任何選項時，jquery/javascript將有助於通過JS動態更新選擇標籤選項。對？ – Owais

是的，這樣的事情應該很容易做到。 – dfsq

您可以在拆分按鈕，如下的改變設定值：

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

您可以按以下線路

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

獲得拆分按鈕的設定值，並驗證它作爲根據您的要求。

來源

2017-02-09 08:08:45

這是一個可以工作4，你只需要在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>

來源

2017-02-09 08:48:42 Linushg111

謝謝大家的回覆。

我已經使用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); 
}

我希望這可以幫助別人。

問候&感謝，

Owais

來源

2017-02-09 09:28:58 Owais

驗證拆分按鈕的下拉引導與HTML需要屬性

回答

相關問題