title: Get selected item on select with js
body: <p>Look, i'm getting crazy, i can't get the selected item inside a normal select dropdown list (The values of the list are created dynamiclly with js).</p>
  
  <p>I have a list of items and that are the columns of a table and i want when i click on an item, the column is added to the table and if i click another time in that item the column is removed.</p>
  
  <p>I've tried to use a change event with jquery and onchange event with js but if i select the item two times in a row the column is added but not removed because the value hasn't changed.
  I've tried to give a onclick event to the options of the select but nothing happens when i click on one. I've tried to capturo the clicked option from the select with jquery with this code: </p>
  
  <pre><code>$("#selectTableLt").on("click", "option", function() {
  let clickedOption = $(this);
  console.log(clickedOption);
  });
  </code></pre>
  
  <p>But nothing happens.</p>
  
  <p>Can anyone help me with this, please? Thank you</p>
  
  <p>Edit:</p>
  
  <p>My html:</p>
  
  <pre><code>&lt;select name="leftColumns" id="selectTableLt"&gt;&lt;/select&gt;
  </code></pre>
  
  <p>I load the options with javascript but they look like:</p>
  
  <pre><code>&lt;option value="opt1"&gt;Option 1&lt;/option&gt;
  </code></pre>
  
  <p>It's very simple</p>