使用 JavaScript 单击更改下拉列表的宽度

Question

我在下面的代码中尝试更改 width 的下拉菜单。我尝试了 click 事件但没有成功。感谢任何帮助。

<script>
$(function() {
  $('select')
    .select2({
      placeholder: 'Search Command...',
      width: '200',
      multiple: false,
      data: [{
        id: '',
        text: ''
      }, {
        id: 'testing1',
        text: 'testing1'
      }, {
        id: 'testing 1,2,3',
        text: 'testing 1,2,3gffffff'
      }],
      tokenSeparators: ['|']
    })
    .on('onClick', function() {
      document.getElementByTagName('select').style.width = '500';
    });
});
</script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" rel="stylesheet"/>

<!doctype html>
<html lang="en">
<head>
<!--  -->
<title>jQuery UI Autocomplete - Default functionality</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" rel="stylesheet" />
<script>
$(function() {
  $('select')
    .select2({
      placeholder: 'Search Command...',
      width: '200',
      multiple: false,
      data: [{
        id: '',
        text: ''
      }, {
        id: 'testing1',
        text: 'testing1'
      }, {
        id: 'testing 1,2,3',
        text: 'testing 1,2,3gffffff'
      }],
      tokenSeparators: ['|']
    })
    .on('click', function() {
      document.getElementByTagName('select').style.width = '500';
    });
});
</script>
</head>
<body>
    <select></select>
</body>
</html>

Answer 1

您可以使用 .toggleClass，这是一个方便的 jQuery 事件，允许您切换 class 的，在本例中是 select 通过添加 id你选择的东西，对于这个例子我将只使用 box，所以： <select id="box">

CSS:

#box {
    width: 100px;
    height: 100px;
    border: 1px solid #ccc;
}

#box.clicked {
    width: 200px;
}

这样你可以使用下面的jQuery:

.$('#box').on('click', function() { $(this).toggleClass('clicked'); });

HTML:

<select id="box"></select>

这样一来，当您单击 select 时，它会将 #box.clicked 添加到 select，当您再次单击它时，它会更改为 [=] 中设置的大小18=]

Answer 2

根据 Select2 Events，没有 click 事件可用。虽然您可以按以下方式使用点击 .select2-container：

$(function() {
  $('select')
    .select2({
      placeholder: 'Search Command...',
      width: '200',
      multiple: false,
      data: [{
        id: '',
        text: ''
      }, {
        id: 'testing1',
        text: 'testing1'
      }, {
        id: 'testing 1,2,3',
        text: 'testing 1,2,3gffffff'
      }],
      tokenSeparators: ['|']
    })
    $('.select2-container').click(function() {
      $(this).css('width','500px');
      $('.select2-dropdown.select2-dropdown--below').attr('style', 'width: 500px !important');
    });
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" rel="stylesheet" />

<select></select>

尽管首选方法是使用 open 事件：

$(function() {
  $('select')
    .select2({
      placeholder: 'Search Command...',
      width: '200',
      multiple: false,
      data: [{
        id: '',
        text: ''
      }, {
        id: 'testing1',
        text: 'testing1'
      }, {
        id: 'testing 1,2,3',
        text: 'testing 1,2,3gffffff'
      }],
      tokenSeparators: ['|']
    })
    .on('select2:open', function() {
      $('.select2-container').css('width','600px');
    });   
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" rel="stylesheet" />

<select></select>

Answer 3

<!doctype html>
<html lang="en">
<head>
<!--  -->
<title>jQuery UI Autocomplete - Default functionality</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" rel="stylesheet" />
<script>
$(function() {
  $('select')
    .select2({
      placeholder: 'Search Command...',
      width: '200',
      multiple: false,
      data: [{
        id: '',
        text: ''
      }, {
        id: 'testing1',
        text: 'testing1'
      }, {
        id: 'testing 1,2,3',
        text: 'testing 1,2,3gffffff'
      }],
      tokenSeparators: ['|']
    })
    .on('change', function() {
      $('.select2-container').css('width', '500px');
    });
});
</script>
</head>
<body>
    <select></select>
</body>
</html>

select2 中的元素是('.select2-container')，事件正在更改中。

检查是否是您要查找的内容。

Answer 4

  $(function() {
      $('select')
        .select2({
          placeholder: 'Search Command...',
          width: '200',
          multiple: false,
          data: [{
            id: '',
            text: ''
          }, {
            id: 'testing1',
            text: 'testing1'
          }, {
            id: 'testing 1,2,3',
            text: 'testing 1,2,3gffffff'
          }],
          tokenSeparators: ['|']
        })
        .change(function() {
        $('.select2').css("width", "500px");
        });
    });

Answer 5

尝试 select2:open select2:close 事件

<!doctype html>
<html lang="en">
<head>
<!--  -->
<title>jQuery UI Autocomplete - Default functionality</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" rel="stylesheet" />
<script>
$(function() {
  $('select')
    .select2({
      placeholder: 'Search Command...',
      width: '200',
      multiple: false,
      data: [{
        id: '',
        text: ''
      }, {
        id: 'testing1',
        text: 'testing1'
      }, {
        id: 'testing 1,2,3',
        text: 'testing 1,2,3gffffff'
      }],
      tokenSeparators: ['|']
    })
    .on('select2:open', function() {
       $('.select2-container').css('width','600px');
    })
   .on("select2:close", function () { 
 $('.select2-container').css('width','200px');
  });
});
</script>
</head>
<body>
    <select></select>
</body>
</html>

使用 JavaScript 单击更改下拉列表的宽度

Onclick change width of dropdown using JavaScript

html

javascript

css

jquery

jquery-select2