Onclick Change Width Of Dropdown Using Javascript

March 21, 2024 Post a Comment

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.

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:

Baca Juga

<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:openselect2: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>

JavaScript General