title: Display option Text from <select> tag
body: <p>I want to get or display de text of the option selected of my <code>&lt;select&gt;</code> but the issue is that these  are generated dynamically so I don't know hot to use the selector (jquery) to catch these values </p>
  
  <p>this is my html where the <code>&lt;select&gt;</code> can change</p>
  
  <pre><code>&lt;div&gt;
  &lt;ul style="list-style-type: none;"&gt;
      &lt;li&gt;
          &lt;input type="checkbox" name="filterCur" value="AutorCu"&gt;&lt;label&gt; Autor&lt;/label&gt;&lt;br&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;input type="checkbox" name="filterCur" value="EscuelaCu"&gt;&lt;label&gt; Escuela&lt;/label&gt;&lt;br&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;input type="checkbox" name="filterCur" value="CategoriasCu"&gt;&lt;label&gt; Categorias&lt;/label&gt;&lt;br&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  
  
  &lt;div id="searchCu"&gt;&lt;select id="AutorCu"&gt;&lt;option&gt;Seleccione una opción&lt;/option&gt;
  &lt;option value="1"&gt;foo1&lt;/option&gt;
  &lt;option value="2"&gt;foo2&lt;/option&gt;
  &lt;option value="3"&gt;fooN&lt;/option&gt;
  &lt;/select&gt;
  &lt;select id="EscuelaCu"&gt;&lt;option&gt;Seleccione una opción&lt;/option&gt;
      &lt;option value="1"&gt;Instituto de Artes&lt;/option&gt;
      &lt;option value="2"&gt;Instituto de Ciencias Basicas e Ingenieria&lt;/option&gt;
      &lt;option value="3"&gt;Instituto de Ciencias de la Salud&lt;/option&gt;
  &lt;/select&gt;
  &lt;select id="CategoriasCu"&gt;&lt;option&gt;Seleccione una opción&lt;/option&gt;
      &lt;option value="1"&gt;Arte y arquitectura&lt;/option&gt;
      &lt;option value="2"&gt;Economia y empresa&lt;/option&gt;
      &lt;option value="3"&gt;Medios de comunicacion&lt;/option&gt;
      &lt;option value="4"&gt;Ingenieria&lt;/option&gt;
  &lt;/select&gt;&lt;/div&gt;
  &lt;button id="BuscarCu" class="btn btn-default"&gt;Buscar&lt;/button&gt;
  </code></pre>
  
  <p></p>
  
  <p>And the JS </p>
  
  <pre><code>&lt;script&gt;
  
  $(document).ready(function () {
  
      //Cursos Procedures
      $("input[name=filterCur").click(function () {
          var checkboxes = $("input[name=filterCur]");
          var searchCu=$("#searchCu");
          $.each(checkboxes,function (index, chk) {
              if(chk.checked)
                  switch(chk.value){
                      case "AutorCu":
                          //console.log("has seleccionado "+chk.value);
                          searchCu.find("#"+chk.value).remove();
                          searchCu.append($("&lt;select&gt;",{id:chk.value}));
                          listAutores("#"+chk.value);
                          break;
                      case "EscuelaCu":
                          //console.log("has seleccionado "+chk.value);
                          searchCu.find("#"+chk.value).remove();
                          searchCu.append($("&lt;select&gt;",{id:chk.value}));
                          listEscuelas("#"+chk.value);
                          break;
                      case "CategoriasCu":
                          //console.log("has seleccionado "+chk.value);
                          searchCu.find("#"+chk.value).remove();
                          searchCu.append($("&lt;select&gt;",{id:chk.value}));
                          listCategorias("#"+chk.value);
                          break;
                      default:
                          //console.log("el valor seleccionado esta mal, torpe");
                  }
              else{
                  switch(chk.value){
                      case "AutorCu":
                          //console.log("has seleccionado "+chk.value);
                          searchCu.find("#"+chk.value).remove();
                          break;
                      case "EscuelaCu":
                          //console.log("has seleccionado "+chk.value);
                          searchCu.find("#"+chk.value).remove();
                          break;
                      case "CategoriasCu":
                          //console.log("has seleccionado "+chk.value);
                          searchCu.find("#"+chk.value).remove();
                          break;
                      default:
                          //console.log("el valor seleccionado esta mal, torpe");
                  }
              }
  
          })
  
      });
  
      $("button#BuscarCu").on("click",function () {
          var siblings = $("#searchCu &gt; select");
          $.each(siblings,function (index, son) {
              //this consolelog, should display the option selected
              **console.log(son.text());**
              //This consolelog, displays the value of the option selected
              console.log(son.value);
  
          });
      });
  });
  </code></pre>
  
  <p></p>
  
  <p>before you ask or answer <code>listEscuelas(id)</code> and <code>listAutores(id)</code> and <code>listCategorias(id)</code> calls an external js with ajax for php that returns the <code>&lt;option&gt;</code> for the <code>id</code> of the <code>&lt;select&gt;&lt;/select&gt;</code> for example
  if you have a <code>&lt;select id="foo"&gt;</code> and then you call <code>listEscuelas(id)</code> for fillup <code>foo</code> id should be <strong><code>id="#foo"</code></strong> and the result will be something like these or other options</p>
  
  <pre><code>&lt;select&gt;&lt;option value="1"&gt;Instituto de Artes&lt;/option&gt;
  &lt;option value="2"&gt;Instituto de Ciencias Basicas e Ingenieria&lt;/option&gt;
  &lt;option value="3"&gt;Instituto de Ciencias de la Salud&lt;/option&gt;
  </code></pre>
  
  <p></p>