ボタンへのドロップダウンの選択テキスト値を表示

私のドロップダウンの選択したテキスト値をボタンに表示したいと思います。私のドロップダウンのテキスト値をクリックしようとしましたが、私のボタンはドロップダウンの選択されたテキスト値を表示していません。あなたはbuttonないvalの.textプロパティを設定する必要がボタンへのドロップダウンの選択テキスト値を表示

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" 
 
\t href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script 
 
\t src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script 
 
\t src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script type="text/javascript"> 
 
\t $(document).ready(function() { 
 
\t \t $("#dropDownUl li") 
 
\t \t on('click', function() { 
 
\t \t \t $('#dropDownBtn').val($(this).text()); 
 
\t \t }); 
 
\t }); 
 
</script> 
 
</head> 
 
<body> 
 
\t <div class="dropdown" style="margin-top: 10px;"> 
 
\t \t <button id="dropDownBtn" class="btn btn-primary dropdown-toggle " 
 
\t \t \t type="button" data-toggle="dropdown"> 
 
\t \t \t Choose A Date <span class="caret"></span> 
 
\t \t </button> 
 
\t \t <ul id="dropDownUl" class="dropdown-menu"> 
 
\t \t \t <li class="text-center">16-12-2016</li> 
 
\t \t \t <li class="text-center">27-12-2016</li> 
 
\t \t \t <li class="text-center">01-02-2017</li> 
 
\t \t </ul> 
 
\t </div> 
 
</body> 
 
</html>

出典

2016-12-22 Test Account

なぜ、非アンカー要素をクリック可能な要素として使用していますか？キーボードのみのユーザーはどのようにあなたのページを使用しますか？ – nnnnnn

。

$(document).ready(function() { 
$("#dropDownUl li").on('click', function() { 
    $('#dropDownBtn').text($(this).text()); 
    }); 
});

出典

2016-12-22 04:11:34 Mairaj

ボタンへのドロップダウンの選択テキスト値を表示

答えて

関連する問題