stackoom
  简体   繁体   中英

Onclick change width of dropdown using JavaScript

 原文  2019-07-31 06:43:59  4   5    javascript/ jquery/ html/ css/ jquery-select2

Question

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>

5 answers

solution1
 1  2019-07-31 06:59:54

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

solution2
 1 ACCPTED  2019-07-31 07:00:42

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>

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>

solution3
 1  2019-07-31 07:05:04

 <!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>

The element in select 2 is ('.select2-container') and the event is on change.

Check if is what yuou are looking for.

solution4
 1  2019-07-31 07:06:12

  $(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");
        });
    });

solution5
 1  2019-07-31 07:06:57

Try with select2:open select2:close Event 

 <!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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Javascript change width of image onclick Javascript change width of div onclick Change image onclick using javascript How to change onclick using Javascript? JavaScript - onclick image change using 'if' Change Colors (onclick) using Javascript Change the OnClick event using Javascript Change onclick function using javascript? Using JavaScript onclick() to change an image bxslider change width onclick
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM