A lot of the current solutions will break in a lot of situations. Any solution that relies on checking the click count twice will be very fickle. 

###Some scenarios to consider:

* If you click on, then off, then back on, it will count both clicks and fire.
* In firefox, you can open the menu with a single mouse click and drag to the chosen option without ever lifting up your mouse.
* If you use any combination of keyboard strokes you are likely to get the click counter out of sync or miss the change event altogether.
    * You can open the dropdown with <kbd>Alt</kbd>+<kbd>↕</kbd> (or the <kbd>Spacebar</kbd> in Chrome and Opera).
    * When the dropdown has focus, any of the arrow keys will change the selection
    * When the dropdown menu is open, clicking <kbd>Tab</kbd> or <kbd>Enter</kbd> will make a selection


###Here's a more comprehensive extension:

The most robust way to see if an option was selected is to use the [`change`][change event] event, which you can handle with jQuery's [`.change()`][change handler] handler.  

The only remaining thing to do is determine if the original element was selected again.  
This has been asked a lot ([one][SO1], [two][SO2], [three][SO3]) without a great answer in any situation.

The simplest thing to do would be to check to see if there was a `click` or `keyup` event on the `option:selected` element **BUT [Chrome, IE, and safari don't seem to support events on `option` elements][lack-of-events-for-options]**, even though they are in the [w3c recommendation][w3 option element]

Inside the `Select` element seems to be a black box.  If you listen to events on it, you can't even tell on which element the event occurred or whether the list was open or not.  

The next best thing then, seems to handle the `blur` event.  This will indicate that the user has focused on the dropdown (perhaps seen the list, perhaps not) and made a decision that they would like to stick with the original value. To continue handling changes right away we'll still subscribe to the `change` event.  And to ensure we don't double count, we'll set a flag if the change event was raised so we don't fire back twice:

###Code:



    (function ($) {
        $.fn.selected = function (fn) {
            return this.each(function () {
                $(this).focus(function () {
                    this.dataChanged = false;
                }).change(function () {
                    this.dataChanged = true;
                    fn(this);
                }).blur(function (e) {
                    if (!this.dataChanged) {
                        fn(this);
                    }
                });
            });
        };
    })(jQuery);

Then call like this:



    $("#dropdownid").selected(function (e) {
        alert('You selected ' + $(e).val());
    });

##[Updated example in jsFiddle][new fiddle]

[change event]: https://developer.mozilla.org/en-US/docs/Web/Reference/Events/change
[change handler]: http://api.jquery.com/change/
[SO1]: https://stackoverflow.com/q/15452103/1366033
[SO2]: https://stackoverflow.com/q/11785479/1366033
[SO3]: https://stackoverflow.com/q/1402227/1366033
[lack-of-events-for-options]: http://webbugtrack.blogspot.ca/2007/11/bug-280-lack-of-events-for-options.html
[w3 option element]: http://www.w3.org/TR/html401/interact/forms.html#h-17.6
[new fiddle]: http://jsfiddle.net/KyleMit/QxS6T/3/

I have a dropdown: `<asp:DropDownList id="dropdownid" runat="server" class=blah"/>` 

in my jQuery, I assign change event like this:

    $('#dropdownid').change(function() {......});

Now, this works when I select different value from the dropdown, however let's say I want to select the same value again. (because I want to make another call with the same value)
So, when I select it again, (without changing the value) just by clicking on the selected value from the dropdown and "selecting" it again, no event fires.
Is there another event in jquery that I have to assign to it? what's the workaround?


Fire event each time a DropDownList item is selected with jQuery

For a **Pure CSS** approach, you can use the [`:checked`][1] selector combined with the [`::before`][2] selector to inline conditional content.

Just add the class `select-checkbox` to your `select` element and include the following CSS:



    .select-checkbox option::before {
      content: "\2610";
      width: 1.3em;
      text-align: center;
      display: inline-block;
    }
    .select-checkbox option:checked::before {
      content: "\2611";
    }

You can use plain old unicode characters (with an [escaped hex encoding][3]) like these:

 * ☐ [Ballot Box][4] - `\2610`
 * ☑ [Ballot Box With Check][5] - `\2611`

Or if you want to spice things up, you can use these [FontAwesome][6] glyphs

 * ![.fa-square-o][7] [.fa-square-o][8] - `\f096`
 * ![.fa-check-square-o][9] [.fa-check-square-o][10] - `\f046`

[![Screenshot][11]][11]

### Demo in [jsFiddle][12] & Stack Snippets





    select {
      width: 150px;
    }

    .select-checkbox option::before {
      content: "\2610";
      width: 1.3em;
      text-align: center;
      display: inline-block;
    }
    .select-checkbox option:checked::before {
      content: "\2611";
    }

    .select-checkbox-fa option::before {
      font-family: FontAwesome;
      content: "\f096";
      width: 1.3em;
      display: inline-block;
      margin-left: 2px;
    }
    .select-checkbox-fa option:checked::before {
      content: "\f046";
    }



    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

    <h3>Unicode</h3>
    <select multiple="" class="form-control select-checkbox" size="5">
      <option>Dog</option>
      <option>Cat</option>
      <option>Hippo</option>
      <option>Dinosaur</option>
      <option>Another Dog</option>
    </select>

    <h3>Font Awesome</h3>
    <select multiple="" class="form-control select-checkbox-fa" size="5">
      <option>Dog</option>
      <option>Cat</option>
      <option>Hippo</option>
      <option>Dinosaur</option>
      <option>Another Dog</option>
    </select>





> **Note**: [Beware of IE compatibility issues however][13]

  [1]: https://developer.mozilla.org/en-US/docs/Web/CSS/:checked
  [2]: https://developer.mozilla.org/en-US/docs/Web/CSS/::before
  [3]: https://stackoverflow.com/a/14294998/1366033
  [4]: https://www.fileformat.info/info/unicode/char/2610/index.htm
  [5]: https://www.fileformat.info/info/unicode/char/2611/index.htm
  [6]: https://fontawesome.com/
  [7]: https://i.stack.imgur.com/MmOKI.png
  [8]: https://fontawesome.com/v4.7.0/icon/square-o/
  [9]: https://i.stack.imgur.com/QrMjr.png
  [10]: https://fontawesome.com/v4.7.0/icon/check-square-o/
  [11]: https://i.stack.imgur.com/pHy3x.png
  [12]: https://jsfiddle.net/KyleMit/mqcp7f3s/
  [13]: https://stackoverflow.com/q/48765664/1366033

The client has given me a design which has a Select Option menu containing a checkbox together with the item name as individual items in the list.
Is there anyway possible to add a checkbox inside a Select Option menu?

NB: Developer needs to add his own id to make the menu effective, I only need the HTML CSS code if it is possible.

How to use Checkbox inside Select Option

I'm gathering that you just want the dropdown to fire anytime a selection is made.  If so, check out the answer to [Fire event each time a DropDownList item is selected with jQuery][DropDown Selected Answer].

**See my updated answer below**:  
<strike>You can use this small extension:</strike>



<pre><code><strike>$.fn.selected = function(fn) {
    return this.each(function() {
        var clicknum = 0;
        $(this).click(function() {
            clicknum++;
            if (clicknum == 2) {
                clicknum = 0;
                fn(this);
            }
        });
    });
}
</strike></code></pre>

Then call like this:

    $(".lead-action").selected(function(e) {
        alert('You selected ' + $(e).val());
    });

#Update:

I'm actually rather unhappy with the original script.  It will break in a lot of situations, and any solution that relies on checking the click count twice will be very fickle. 

###Some scenarios to consider:

* If you click on, then off, then back on, it will count both clicks and fire.
* In firefox, you can open the menu with a single mouse click and drag to the chosen option without ever lifting up your mouse.
* If you use any combination of keyboard strokes you are likely to get the click counter out of sync or miss the change event altogether.
    * You can open the dropdown with <kbd>Alt</kbd>+<kbd>↕</kbd> (or the <kbd>Spacebar</kbd> in Chrome and Opera).
    * When the dropdown has focus, any of the arrow keys will change the selection
    * When the dropdown menu is open, clicking <kbd>Tab</kbd> or <kbd>Enter</kbd> will make a selection

###Here's a more comprehensive extension I just came up with:

The most robust way to see if an option was selected is to use the [`change`][change event] event, which you can handle with jQuery's [`.change()`][change handler] handler.  

The only remaining thing to do is determine if the original element was selected again.  
This has been asked a lot ([one][SO1], [two][SO2], [three][SO3]) without a great answer in any situation.

The simplest thing to do *would* be to check to see if there was a `click` or `keyup` event on the `option:selected` element **BUT [Chrome, IE, and Safari don't seem to support events on `option` elements][lack-of-events-for-options]**, even though they are referenced in the [w3c recommendation][w3 option element]

Inside the `Select` element is a black box.  If you listen to events on it, you can't even tell on which element the event occurred or whether the list was open or not.  

The next best thing is to handle the `blur` event.  This will indicate that the user has focused on the dropdown (perhaps seen the list, perhaps not) and made a decision that they would like to stick with the original value. To continue handling changes right away we'll still subscribe to the `change` event.  And to ensure we don't double count, we'll set a flag if the change event was raised so we don't fire back twice:

##[Updated example in jsFiddle][new fiddle]

    (function ($) {
        $.fn.selected = function (fn) {
            return this.each(function () {
                var changed = false;
                $(this).focus(function () {
                    changed = false;
                }).change(function () {
                    changed = true;
                    fn(this);
                }).blur(function (e) {
                    if (!changed) {
                        fn(this);
                    }
                });
            });
        };
    })(jQuery);


[DropDown Selected Answer]: https://stackoverflow.com/a/898761/1366033
[original fiddle]: http://jsfiddle.net/KyleMit/QxS6T/
[change event]: https://developer.mozilla.org/en-US/docs/Web/Reference/Events/change
[change handler]: http://api.jquery.com/change/
[SO1]: https://stackoverflow.com/q/15452103/1366033
[SO2]: https://stackoverflow.com/q/11785479/1366033
[SO3]: https://stackoverflow.com/q/1402227/1366033
[lack-of-events-for-options]: http://webbugtrack.blogspot.ca/2007/11/bug-280-lack-of-events-for-options.html
[w3 option element]: http://www.w3.org/TR/html401/interact/forms.html#h-17.6
[new fiddle]: http://jsfiddle.net/KyleMit/QxS6T/

I have a table and I use select menu in each row for different actions for that specific row.

For example:

    $(document).on('change', '.lead-action', function() {
        // Do stuff
    }

this method gets the value of the selected option.  Based on the selected value, I display different popups. When the user leaves the page, the select menu retains the previously selected option. 

Sometimes users click on the same option in the select menu. When they do, the above code doesn't work.

Is there a way to invoke the code block above if the same option in the select menu is selected?

Select selected option again

This issue occurs because the `#width_tmp` is nested under `.input-group-btn` so it inherits the `font-size: 0;` property from bootstrap. Therefore, the calculated width of the element is always zero:

![screenshot](http://i.imgur.com/8RXS07j.png)

To fix this, just move the `<span id="width_tmp"></span>` so it's not inside the input group.


-----

# Pure JS Solution

```js
// resize on initial load
document.querySelectorAll("select").forEach(resizeSelect)

// delegated listener on change
document.body.addEventListener("change", (e) => {
    if (e.target.matches("select")) {
        resizeSelect(e.target)
    }
})

function resizeSelect(sel) {
  let tempOption = document.createElement('option');
  tempOption.textContent = sel.selectedOptions[0].textContent;

  let tempSelect = document.createElement('select');
  tempSelect.style.visibility = "hidden";
  tempSelect.style.position = "fixed"
  tempSelect.appendChild(tempOption);
  
  sel.after(tempSelect);
  sel.style.width = `${+tempSelect.clientWidth + 4}px`;
  tempSelect.remove();
}
```

### Demo in [jsFiddle][1] and Stack Snippets





    // resize on initial load
    document.querySelectorAll("select").forEach(resizeSelect)

    // delegated listener on change
    document.body.addEventListener("change", (e) => {
        if (e.target.matches("select")) {
            resizeSelect(e.target)
        }
    })

    function resizeSelect(sel) {
      let tempOption = document.createElement('option');
      tempOption.textContent = sel.selectedOptions[0].textContent;

      let tempSelect = document.createElement('select');
      tempSelect.style.visibility = "hidden";
      tempSelect.style.position = "fixed"
      tempSelect.appendChild(tempOption);
      
      sel.after(tempSelect);
      sel.style.width = `${+tempSelect.clientWidth + 4}px`;
      tempSelect.remove();
    }




    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <select>
      <option value="2">Some longer option</option>
      <option value="1">Short option</option>
      <option value="3">An very long option with a lot of text</option>
    </select>

    <select>
      <option>Short option 2</option>
      <option>Some longer option 2</option>
      <option selected>An very long option with a lot of text 2</option>
    </select>



---

# jQuery Plugin Solution

Another alternative would be to use a plugin to handle the whole operation start to finish.  Here's one I just whipped up.

The plugin dynamically creates and destroys the `span` so it doesn't clutter up your html. This helps separate concerns and lets you delegate that functionality to another file and easily re-use with multiple elements across multiple pages.

```js
(function($, window){
  $(function() {
    let arrowWidth = 30;

    $.fn.resizeselect = function(settings) {  
      return this.each(function() { 

        $(this).change(function(){
          let $this = $(this);

          // get font-weight, font-size, and font-family
          let style = window.getComputedStyle(this)
          let { fontWeight, fontSize, fontFamily } = style

          // create test element
          let text = $this.find("option:selected").text();
          let $test = $("<span>").html(text).css({
            "font-size": fontSize, 
            "font-weight": fontWeight, 
            "font-family": fontFamily,
            "visibility": "hidden" // prevents FOUC
          });

          // add to body, get width, and get out
          $test.appendTo($this.parent());
          let width = $test.width();
          $test.remove();

          // set select width
          $this.width(width + arrowWidth);

          // run on start
        }).change();

      });
    };

    // run by default
    $("select.resizeselect").resizeselect();                       
  })
})(jQuery, window);
```

You can initialize the plugin in one of two ways:

1. **HTML** - Add the class `.resizeselect` to any select element:

    
    
    <pre><code>&lt;select class=&quot;btn btn-select <b>resizeselect</b>&quot;&gt;
      &lt;option&gt;All&lt;/option&gt;
      &lt;option&gt;Longer&lt;/option&gt;
      &lt;option&gt;A very very long string...&lt;/option&gt;
    &lt;/select&gt;
    </code></pre>

2. **JavaScript** - Call `.resizeselect()` on any jQuery object:

    
    
    <pre><code>$("select").<b>resizeselect</b>()</code></pre>

### Demo in [jsFiddle][2] and StackSnippets:





    (function($, window){
      $(function() {
        let arrowWidth = 30;

        $.fn.resizeselect = function(settings) {  
          return this.each(function() { 

            $(this).change(function(){
              let $this = $(this);

              // get font-weight, font-size, and font-family
              let style = window.getComputedStyle(this)
              let { fontWeight, fontSize, fontFamily } = style

              // create test element
              let text = $this.find("option:selected").text();
              let $test = $("<span>").html(text).css({
                "font-size": fontSize, 
                "font-weight": fontWeight, 
                "font-family": fontFamily,
                "visibility": "hidden" // prevents FOUC
              });

              // add to body, get width, and get out
              $test.appendTo($this.parent());
              let width = $test.width();
              $test.remove();

              // set select width
              $this.width(width + arrowWidth);

              // run on start
            }).change();

          });
        };

        // run by default
        $("select.resizeselect").resizeselect();                       
      })
    })(jQuery, window);



    .btn-select {
      color: #333;
      background-color: #f5f5f5;
      border-color: #ccc;
      padding:7px;
    }



    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
    <link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet"/>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>

    <div class="form-group">
      <div class="input-group">

        <span class="input-group-btn">
          <select class="btn btn-select resizeselect">
            <option>All</option>
            <option>Longer</option>
            <option>A very very long string...</option>
          </select>
        </span>

        <input type="text" class="form-control" placeholder="Search by...">

        <span class="input-group-btn">
          <button class="btn btn-default" type="button">
            <i class="fa fa-search"></i>
          </button>
        </span>

      </div>
    </div>



[1]: https://jsfiddle.net/KyleMit/0gs216tw/
[2]: https://jsfiddle.net/KyleMit/3sx64k3a/

I want the select element to have the default option value's width which is shorter. When the user selects another option, the select element should resize itself so the whole text is always visible in the element.

I have found a solution in the question [Auto resizing the SELECT element according to selected OPTION's width][1], but it doesn't work with bootstrap, and I don't know why.

Here's my attempt:





    $(document).ready(function() {
      $('select').change(function(){
        $("#width_tmp").html($('select option:selected').text());
        // 30 : the size of the down arrow of the select box 
        $(this).width($("#width_tmp").width()+30); 
      });
    });



    .btn-select {
      color: #333;
      background-color: #f5f5f5;
      border-color: #ccc;
      padding:7px;
    }
    select {
      width: 60px;
    }

    #width_tmp{
      display : none;
    }



    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
    <link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet"/>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>

    <div class="form-group">
      <div class="input-group">

        <span class="input-group-btn">
          <select class="btn btn-select align-left">
            <option>All</option>
            <option>Longer</option>
            <option>A very very long string...</option>
          </select>
          <span id="width_tmp"></span>
        </span>

        <input type="text" class="form-control" placeholder="Search by...">

        <span class="input-group-btn">
          <button class="btn btn-default" type="button">
            <i class="fa fa-search"></i>
          </button>
        </span>

      </div>
    </div>





[1]: https://stackoverflow.com/a/24336512/1366033