Onclick使用JavaScript更改下拉菜单的宽度 [英] Onclick change width of dropdown using JavaScript
本文介绍了Onclick使用JavaScript更改下拉菜单的宽度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在下面的代码中尝试单击以更改下拉菜单的width.我尝试了click事件，但没有成功.感谢您的帮助.
I've below code in which I'm trying to change width of dropdown upon click. I tried with click event but no success. Any help is appreciated.
<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>
<!-- 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>
推荐答案
根据 Select2事件，没有可用的click事件.
尽管您可以按以下方式使用.select2-container来单击:
According to Select2 Events, no click event available.
Though you can use click on .select2-container like the following way:
$(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事件:
Though the preferred way is to use open event:
$(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>
这篇关于Onclick使用JavaScript更改下拉菜单的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
