Onclick 使用 JavaScript 更改下拉菜单的宽度答案

【问题标题】：Onclick change width of dropdown using JavaScriptOnclick 使用 JavaScript 更改下拉菜单的宽度
【发布时间】：2019-07-31 06:43:59
【问题描述】：

我在下面的代码中尝试在单击时更改下拉列表的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>

&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" rel="stylesheet"/&gt;

<!doctype html>
<html lang="en">
<head>
<!-- https://stackoverflow.com/questions/43579748/how-to-achieve-autocomplete-feature-over-html-drop-down-or-select-element -->
<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>

【问题讨论】：

onClick 不是 Jquery 中的有效处理程序。请改用click
试过但没有改变。

标签： javascript jquery html css jquery-select2

【解决方案1】：

根据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>

【讨论】：

click 处理程序工作正常。使用 focusout 处理程序恢复到原始大小。
@Experimenter，很高兴知道：)
在click事件之后是否也可以扩展框的更改宽度。
你能看看这个吗：stackoverflow.com/questions/57287106/…

【解决方案2】：

你可以使用.toggleClass，这是一个方便的jQuery事件，允许你切换类，在这种情况下是select 通过添加你选择的id，在这个例子中我将只使用@ 987654323@，所以： <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>

这使得当您单击选择时，它会将#box.clicked 添加到选择中，当您再次单击它时，它会更改为在#box 中设置的大小

【讨论】：

【解决方案3】：

<!doctype html>
<html lang="en">
<head>
<!-- https://stackoverflow.com/questions/43579748/how-to-achieve-autocomplete-feature-over-html-drop-down-or-select-element -->
<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>

select 2 中的元素是 ('.select2-container') 并且事件处于更改状态。

检查是否是你正在寻找的。p>

【讨论】：

【解决方案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");
        });
    });

【讨论】：

【解决方案5】：

尝试select2:openselect2:close事件

<!doctype html>
<html lang="en">
<head>
<!-- https://stackoverflow.com/questions/43579748/how-to-achieve-autocomplete-feature-over-html-drop-down-or-select-element -->
<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>

【讨论】：