• 2024-11-21
宇哥博客 前端开发 fSelect下拉多选,增加自定义输入框(附完整代码)

fSelect下拉多选,增加自定义输入框(附完整代码)

下拉选项中某一项可以自定义输入文字内容,部分代码如下:

<select id="example-getting-started" multiple="multiple">
    <option value="选项1" data-id="1">选项1</option>
    <option value="选项2" data-id="2">选项2</option>
    <option value="选项3" data-id="3">选项3</option>
    <option value="选项4" data-id="4">选项4</option>
    <option value="选项5" data-id="5">选项5</option>
    <option value="其他(请填写)" data-id="6">其他(请填写)</option>
</select>

<script type="text/javascript">
    $(document).ready(function() {
		$('#example-getting-started').fSelect({
			placeholder:'请选择',
			numDisplayed: 10,
			searchText:'搜索',
			showSearch:true
		});

    });
</script>

fSelect.js中增加:

if(!$(this).hasClass('selected') ){
			if($(this).find('.fs-option-label').html().indexOf('请填写')>=0){
				//加上 onpaste="return false"  , 禁止粘贴
				$(this).find('.fs-option-label').html('<p style="border: 1px #b4b4b4 solid;outline: none;height: 20px;line-height: 20px;-webkit-user-select:text" contenteditable="true" onpaste="return false"></p> ');
				$(this).find('.fs-option-label').find('p').focus();//焦点
			}
		}

效果:

完整代码下载:https://wwnj.lanzout.com/b032elyaf 密码:1ux1

本文来自网络,不代表本站立场,转载请注明出处。https://www.ygbks.com/3978.html

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

1条评论

返回顶部