Onclick Change Width Of Dropdown Using Javascript
Solution 1:
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');
});
});
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script><linkhref="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" /><select></select>
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');
});
});
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script><linkhref="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" /><select></select>
Solution 2:
You can use .toggleClass
, this is a handy jQuery event that allows you to toggle the class of, in this case the select
By adding a id of something of your choice, for this example I will just use box
, so:
<select id="box">
CSS:
#box {
width: 100px;
height: 100px;
border: 1px solid #ccc;
}
#box.clicked {
width: 200px;
}
This way you can use the following jQuery:
.$('#box').on('click', function() {
$(this).toggleClass('clicked');
});
HTML:
<select id="box"></select>
This makes it so when you click on the select it adds the #box.clicked
to the select and when you click on it again it changes to it's size set in #box
Solution 3:
<!doctype html><htmllang="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><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script><linkhref="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>
The element in select 2 is ('.select2-container') and the event is on change.
Check if is what yuou are looking for.
Solution 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");
});
});
Solution 5:
Try with select2:open
select2:close
Event
<!doctype html><htmllang="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><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script><linkhref="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>
Post a Comment for "Onclick Change Width Of Dropdown Using Javascript"