# jquery版本的下拉多选框不受父元素的overflow影响

最新推荐文章于 2023-09-23 08:38:47 发布

芮飞翔

最新推荐文章于 2023-09-23 08:38:47 发布

阅读量128

点赞数

文章标签： jquery js html

本文链接：https://blog.csdn.net/weixin_43946320/article/details/118678094

版权

jquery版本的下拉多选框不受父元素的overflow影响

之前在网上找了一圈全是受父元素影响的下拉多选很难受只能自己写一个现在分享出来

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
</head>

<body>
  <div class='box'>
    <div class='td'>选项1;选项2</div>
  </div>
</body>
<script>
  const list = [
  {
    value: '选项1',
    text: '选项1',
  },{
    value: '选项2',
    text: '选项2',
  },{
    value: '选项3',
    text: '选项3',
  }
  ]
  createCheckBox(list);
  function createCheckBox(list) {
    const button = '<button class="showBox" />';
    const choiceDom = '<span class="active"></span>';
    const $td = $('.td');
    const $box = $('.box');
    const text = $td.text();
    let choiceArr = text.split(';');
    $td.empty().append(button);
    const $button = $td.find('button');
    $button.text(text);
    let liDom = '';
    list.forEach(li => {
      let choiceState = '';
      choiceArr.indexOf(li.text) > -1 && (choiceState = choiceDom)
      liDom += `<li>${li.text}${choiceState}</li>`
    })
    const checkbox = document.createElement('div');
    const checkboxDom = $(checkbox).append(`<div class="multiple" style='display: none;'>
    <div>
      <input type='text' placeholder='请输入'/>
    </div>
    <ul class="checkList">
      ${liDom}
    </ul>
  </div>`);
    $box.append(checkboxDom);
    
    $(checkboxDom).on('click',function(e){
      e.stopPropagation()
    })
    $(checkboxDom).find('input').on('input',function(){
      var val = $(this).val();
      let liDom = ''
      list.forEach(li => {
        let choiceState = '';
        choiceArr.indexOf(li.text) > -1 && (choiceState = choiceDom)
        li.text.indexOf(val) > -1 && (liDom += `<li>${li.text}${choiceState}</li>`)
      })
      $(checkboxDom).find('ul').html(liDom);
    })
    $(checkboxDom).on('click.item','li',function(){
      if($(this).find('.active').length) {
        $(this).find('.active').remove();
      }else {
        $(this).append(choiceDom);
      }
      let textArr = []
      $($(checkboxDom).find('li')).each(function(index,item) {
        const val = $(item).text();
        $(item).find('.active').length && textArr.push(val);
      })
      choiceArr = textArr;
      const text = textArr.join(';')
      $button.text(text);
      $button.attr('title',text);
    })
    $button.on('click', function (e) {
      e.stopPropagation();
      e.preventDefault();
      // 获取元素位置
      let offset = $(this).offset();
      $(checkboxDom).css({'left':offset.left,'top':offset.top+28,'position':'absolute'}).find('.multiple').show();
    })
    $('.box').on('click', function () {
      console.log($box.find('.multiple').is(':hidden'))
      if ($box.find('.multiple').is(':hidden')) {
        const text = $button.text();
        $td.empty().text(text);
        $('body').unbind('click');
      } else {
        $(checkboxDom).find('.multiple').hide();
      }
    })
  }
</script>
<style>
  button {
    position: absolute;
    top: 200px;
    left: 400px;
  }
  .box {
    height: 100vh;
  }


.checkList{
  margin: 0;
  padding: 0;
}
.checkList li{
  padding: 3px 10px 3px 3px;
  list-style:none;
  color: #676a6c;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.checkList li .active{
  float: right;
}
.checkList .active::after{
  content:'√';
}
.multiple {
  padding: 8px 6px;
  border-radius: 4px;
  border: 1px solid #efeeee;
}
.multiple input{
  margin: 2px 4px;
}
.showBox {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid #676a6c;
  background-color: #fff;
  border-radius: 2px;
  outline: none;
  width: 80px;
  height: 21px;
  text-align: left;
}
</style>
</html>

芮飞翔

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
# jquery版本的下拉多选框不受父元素的overflow影响

jquery版本的下拉多选框不受父元素的overflow影响之前在网上找了一圈全是受父元素影响的下拉多选很难受只能自己写一个现在分享出来<html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-wi
复制链接

扫一扫