下拉菜单中带有值的图标标志 [英] Icon flags with value in dropdown menu
本文介绍了下拉菜单中带有值的图标标志的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有引导程序下拉菜单，其中包含可供选择的选项.我想在左侧的文本附近添加国旗.我做到了，但问题是当我选择下拉列表中的选项并提交时，该标志也是通过 php/html 发送的.我不知道如何把它放在这里，不要用 提交标志，并在左侧有标志.
HTML:
<span class="btn-select-arrow glyphicon glyphicon-chevron-down"></span><input class="btn-select-input" id="select_league" name="league" type="hidden"><span class="btn-select-value">所有联赛</span><ul style="display: none;"><li class=""><span class="flag-icon flag-icon-br"></span>巴西</li><li class=""><span class="flag-icon flag-icon-br"></span>巴西</li><li class=""><span class="flag-icon flag-icon-br"></span>巴西</li><li class=""><span class="flag-icon flag-icon-br"></span>巴西</li><li class=""><span class="flag-icon flag-icon-br"></span>巴西</li><li class=""><span class="flag-icon flag-icon-br"></span>巴西</li><li class=""><span class="flag-icon flag-icon-br"></span>巴西</li><li class=""><span class="flag-icon flag-icon-br"></span>巴西</li><li class=""><span class="flag-icon flag-icon-br"></span>巴西</li></a> 解决方案
Select Drop-downs with FontAwesome &字体标志图标
FontAwesome 演示
$( document.body ).on( 'click', '.dropdown-menu li', function( event ) {var $target = $( event.currentTarget );$target.closest('.btn-group').find( '[data-bind="label"]' ).text( $target.text() ).结尾().children( '.dropdown-toggle' ).dropdown('toggle');返回假；});.btn-input {显示:块；}.btn-input .btn.form-control {文本对齐:左；}.btn-input .btn.form-control span:first-child {左:10px；溢出:隐藏；位置:绝对；右:25px；}.btn-input .btn.form-control .caret {边距顶部:-1px；位置:绝对；右:10px；顶部:50%；}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/><script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script><link href="https://fontawesome.io/assets/font-awesome/css/font-awesome.css" rel="stylesheet"/><link href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/0.8.2/css/flag-icon.min.css" rel="stylesheet"/><div class="容器"><div class="row"><div class="col-sm-3"><h5>选择带有 FontAwesome 图标的下拉菜单</h5><div class="panel panel-default"><div class="panel-body"><div class="btn-group"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span data-bind="label">所有联赛</span><span class="caret"></span><ul class="dropdown-menu" role="menu"><li><a href="#"><i class="fa fa-flag fa-fw"></i>巴西</a></li><li><a href="#"><i class="fa fa-flag fa-fw"></i>巴西</a></li><li><a href="#"><i class="fa fa-flag fa-fw"></i>巴西</a></li>