下拉框多个按钮实现

最新推荐文章于 2020-05-18 10:30:33 发布

切儿

最新推荐文章于 2020-05-18 10:30:33 发布

阅读量1.2k

点赞数

分类专栏： web js 文章标签： select 下拉框一行多个按钮

本文链接：https://blog.csdn.net/kangmingyaner/article/details/100770472

版权

web 同时被 2 个专栏收录

33 篇文章 1 订阅

订阅专栏

11 篇文章 0 订阅

订阅专栏

基础环境：bootstrap、angularJs

模拟下拉框实现

<div class="form-group">
	<label class="col-md-4 control-label" for="gb_tdbh">									
		通道编号：
	</label>
	<div class="col-md-8">
		<!--<input class="form-control" name="gb_tdbh" type="text" data-ng-model="SIPgbSpace.CH1_ID"/>-->
		<div class="select_C " style="position: relative;">
		    <div class="input_in">
		        <input type="text" id="channelNum" class="form-control" value="" />
		    </div>
		    <div id="selContent" class="hide col-md-12" style="position: absolute; z-index: 99;border: 1px solid #d6d6d6;background-color: #FFF;overflow: scroll;overflow-x: hidden;height: 200px;">
		        <button class="btn-sm sele_btn" style="width:65px;margin-left: 10px;margin-top: 5px;margin-bottom:5px;">通道1</button>
		        <button class="btn-sm sele_btn" style="width:65px;margin-left: 10px;margin-top: 5px;margin-bottom:5px;">2</button>
		        <button class="btn-sm sele_btn" style="width:65px;margin-left: 10px;margin-top: 5px;margin-bottom:5px;">3</button>
		        <button class="btn-sm sele_btn" style="width:65px;margin-left: 10px;margin-top: 5px;margin-bottom:5px;">4</button>
		        <button class="btn-sm sele_btn" style="width:65px;margin-left: 10px;margin-top: 5px;margin-bottom:5px;">5</button>
		        <button class="btn-sm sele_btn" style="width:65px;margin-left: 10px;margin-top: 5px;margin-bottom:5px;">6</button>
		        <button class="btn-sm sele_btn" style="width:65px;margin-left: 10px;margin-top: 5px;margin-bottom:5px;">7</button>
		    </div>
		</div>
	</div>
</div>

js 逻辑处理

function selectInto(){
		$("#selContent").empty();
		var channel = ChannelNum.getter().channelnum;
		for(var i=0;i<parseInt(channel);i++){
			var str = '<button class="btn-sm sele_btn" style="width:65px;margin-left: 10px;margin-top: 5px;margin-bottom:5px;">通道'+i+'</button>';
			$("#selContent").append(str);
		}
		
		$('#channelNum').on('click',function(){
	        if($('#selContent').is('.hide')){
	            $('#selContent').removeClass('hide');
	        }else{
	            $('#selContent').addClass('hide');
	        }
	    })
	    $('.sele_btn').on('click',function(){
	        $('#channelNum').val($(this).html());
	        $('#selContent').addClass('hide');
	    })
	}
	selectInto();

效果图：