How to receive an event when selected option is the already selected option of a dropdown?

Question 1

Jarrod Roberson’s Question:

Objective:

I want to dyanmically load a select with values from an AJAX call, and allow the user to select the first item in the list once it is loaded and after it gets focus, right now, the first item is the selected item and when you click the dropdown and click the first item nothing happens. I can’t add any placeholder items that are not valid selections.

Question:

How do you fire the .change event in jQuery when the currently selected option is reselected / not changed?

Given the following :

<select id="myoptions">
  <option id="one" >Option 1</option>
  <option id="two">Option 2</option>
</select>

Assuming that option one is selected, and I click on the dropdown and select one again, what event fires?

$('#myoptions').change(function() {
    alert('You selected something!');
}

The above code works if I select something different, but if I select the currently selected option nothing happens. I tried using .click and nothing happens then either.

In other words :

If I click on the dropdown and “select” the currently selected option, how do I get an event to fire?

NOTE:

All these suggestions about trigger are not solutions, I need something that fires when I click on Option 1 with the mouse when Option 1 is already the selected option.

None of the answers is a working solution for the use case of the very first time the dropdown is selected, and someone selects the default selected option. Nothing happens.

focusout is not a solution, it doesn’t happen until someone clicks somewhere else, which is too late in the game.

Answer

Starx

Use .trigger() function to fire custom events on elements.

$("#yourelementid").trigger('change'):

This way you can trigger the change event on element with id yourelementid

Now since you want this to happen when you click on the dropdown and select the previous element. Adding a click event should do it.

$("#yourelementid").on('click', function() {
    $(this).trigger('change');
});

Question 2

Question by Nathan Bell

Nathan Bell

I have a simple HTML table that I want to render consistently across every modern browser (IE9, latest FF, Chrome, Safari). If I apply widths and “display: inline-block” to just the table cells, FireFox 4 and Chrome will allow the table cells to ‘wrap’ into a second row, as if they were just regular inline-block elements. In IE9, however, the cells are treated like classic table cells, and do not maintain their widths and are scrunched into one row.

Full example of the code is here: http://jsbin.com/ujeber/6

Is there a CSS property that can be applied to the table, tr, or td elements to get IE9, Chrome and FireFox 4 to behave in the same way as each other? If not, which of these browsers is following the standards correctly, or are the standards ambiguous in this case?

Markup:

<table>
  <tr>
    <td>Test1</td>
    <td>Test2</td>
    <td>Test3</td>
    <td>Test4</td>
  </tr>
</table>

Style:

  td {
    width:300px;
    display:inline-block;
  }

  table {
    width: 650px;  
  }

I know that this isn’t the typical/suggested way to use the table element. I am asking in the context of the expected behavior of rendering engines. I’m not looking for answers related to choosing semantically appropriate tags.

Answer

Answer by thirtydot

thirtydot

I can’t find a way to make IE9 give your desired result with display: inline-block.

Unless your actual use case is somehow different than your simplified test case, you should just be able to switch to float: left on td, which does work:

http://jsbin.com/ujeber/7

floats and inline-block are often interchangeable. But, they both have different strengths and weaknesses. With floats, you have to clear/contain them. With inline-block, you have to deal with extra gaps (commonly fixed by removing whitespace in HTML), and it doesn’t work in IE6/7 without further tricks.

Answer

Answer by Starx

Starx

No, there isn’t any CSS properties, to wrap the cells.
_{P.s. AFAIK}

Tag: google-chrome