0

Tengo esta tabla en html

<button type="button" class="assign" id="assign">assign</button>
        <table id="example-table" class="table table-striped table-hover table-condensed">
          <tr>
            <th>Make</th>
            <th>Model</th>
            <th>Color</th>
            <th>SELECT</th>
          </tr>
          <tbody>
            <tr>
              <td>Ford</td>
              <td>Escort</td>
              <td>Blue</td>
               <td id="ISINcb" class="lblCell_R" align="center">
            <select>
                <option id="ISIN1">A Abel</option>
                <option id="ISIN2">B Babel</option>
                <option id="ISIN3">C Cable</option>
                <option id="ISIN4">E Enable</option>
            </select>
        </td>
            </tr>
            <tr>
              <td>Ford</td>
              <td>Ranger</td>
              <td>Blue</td>
              <td id="ISINcb" class="lblCell_R" align="center">
            <select>
                <option id="ISIN1">A Abel</option>
                <option id="ISIN2">B Babel</option>
                <option id="ISIN3">C Cable</option>
                <option id="ISIN4">E Enable</option>
            </select>
        </td>
            </tr>
            <tr>
              <td>Toyota</td>
              <td>Tacoma</td>
              <td>Red</td>
              <td id="ISINcb" class="lblCell_R" align="center">
            <select>
                <option id="ISIN1">A Abel</option>
                <option id="ISIN2">B Babel</option>
                <option id="ISIN3">C Cable</option>
                <option id="ISIN4">E Enable</option>
            </select>
        </td>
            </tr>
            <tr>
              <td>Ford</td>
              <td>Mustang</td>
              <td>Silver</td>
              <td id="ISINcb" class="lblCell_R" align="center">
            <select>
                <option id="ISIN1">A Abel</option>
                <option id="ISIN2">B Babel</option>
                <option id="ISIN3">C Cable</option>
                <option id="ISIN4">E Enable</option>
            </select>
        </td>
            </tr>
            <tr>
              <td>Mercury</td>
              <td>Sable</td>
              <td>Silver</td>
              <td id="ISINcb" class="lblCell_R" align="center">
            <select>
                <option id="ISIN1">A Abel</option>
                <option id="ISIN2">B Babel</option>
                <option id="ISIN3">C Cable</option>
                <option id="ISIN4">E Enable</option>
            </select>
        </td>
            </tr>
            <tr>
              <td>Toyota</td>
              <td>Corolla</td>
              <td>Blue</td>
              <td id="ISINcb" class="lblCell_R" align="center">
            <select>
                <option id="ISIN1">A Abel</option>
                <option id="ISIN2">B Babel</option>
                <option id="ISIN3">C Cable</option>
                <option id="ISIN4">E Enable</option>
            </select>
        </td>
            </tr>

          </tbody>
        </table>

y esta forma me traigo lo que esta seleccionado en el select y el model

$(function() {
    $('.assign').on('click', function(e){
    $('tbody tr').each(function(){
        console.log($(this).children().find("select").find(":selected").text());
        console.log($(this).children()[0].textContent);

    })
});

});

El error que tengo es que igual me vienen todos en el log, y no solo el que este selected

ejemplo del log seria: Corolla b Bable

2
  • Te está saliendo todo porque estas recorriendo todos los tr del tbody y poniendo en el log primero la opción seleccionada del option que le pertenece al tr y en el segundo el texto de la primer celda. Exactamente que esperas como resultado
    – Lato
    Commented el 14 jul. 2017 a las 5:05
  • Digamos que si en el select escojo B Babel el log me muestre el model y el valor de el select que seria B Babel
    – Eduard
    Commented el 14 jul. 2017 a las 5:10

2 respuestas 2

1

Los titulos ponlos dentro de un elemento thead

<thead>
  <tr>
    <th>Make</th>
    <th>Model</th>
    <th>Color</th>
    <th>SELECT</th>
  </tr>
</thead>

El modelo está en la columna 1 y tu en el log estas obteniendo el valor de la columna 0 que es la marca

console.log($(this).children().find("select").find(":selected").text());
//console.log($(this).children()[0].textContent);  //Marca
console.log($(this).children()[1].textContent);   //Modelo

Para poner el modelo y la opción seleccionada como Corolla b Bable sería algo así:

$(function() {
    $('.assign').on('click', function(e){
    $('tbody tr').each(function(){
        console.log(
                    //El modelo está en el índice 1 no en el 0
                    $(this).children()[1].textContent + " " +
                    //Opcion seleccionada
                    $(this).children().find("select").find(":selected").text());

    })
});

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<button type="button" class="assign" id="assign">assign</button>
        <table id="example-table" class="table table-striped table-hover table-condensed">
          <thead>
             <tr>
               <th>Make</th>
               <th>Model</th>
               <th>Color</th>
               <th>SELECT</th>
             </tr>
          </thead>
          <tbody>
            <tr>
              <td>Ford</td>
              <td>Escort</td>
              <td>Blue</td>
               <td id="ISINcb" class="lblCell_R" align="center">
            <select>
                <option id="ISIN1">A Abel</option>
                <option id="ISIN2">B Babel</option>
                <option id="ISIN3">C Cable</option>
                <option id="ISIN4">E Enable</option>
            </select>
        </td>
            </tr>
            <tr>
              <td>Ford</td>
              <td>Ranger</td>
              <td>Blue</td>
              <td id="ISINcb" class="lblCell_R" align="center">
            <select>
                <option id="ISIN1">A Abel</option>
                <option id="ISIN2">B Babel</option>
                <option id="ISIN3">C Cable</option>
                <option id="ISIN4">E Enable</option>
            </select>
        </td>
            </tr>
            <tr>
              <td>Toyota</td>
              <td>Tacoma</td>
              <td>Red</td>
              <td id="ISINcb" class="lblCell_R" align="center">
            <select>
                <option id="ISIN1">A Abel</option>
                <option id="ISIN2">B Babel</option>
                <option id="ISIN3">C Cable</option>
                <option id="ISIN4">E Enable</option>
            </select>
        </td>
            </tr>
            <tr>
              <td>Ford</td>
              <td>Mustang</td>
              <td>Silver</td>
              <td id="ISINcb" class="lblCell_R" align="center">
            <select>
                <option id="ISIN1">A Abel</option>
                <option id="ISIN2">B Babel</option>
                <option id="ISIN3">C Cable</option>
                <option id="ISIN4">E Enable</option>
            </select>
        </td>
            </tr>
            <tr>
              <td>Mercury</td>
              <td>Sable</td>
              <td>Silver</td>
              <td id="ISINcb" class="lblCell_R" align="center">
            <select>
                <option id="ISIN1">A Abel</option>
                <option id="ISIN2">B Babel</option>
                <option id="ISIN3">C Cable</option>
                <option id="ISIN4">E Enable</option>
            </select>
        </td>
            </tr>
            <tr>
              <td>Toyota</td>
              <td>Corolla</td>
              <td>Blue</td>
              <td id="ISINcb" class="lblCell_R" align="center">
            <select>
                <option id="ISIN1">A Abel</option>
                <option id="ISIN2">B Babel</option>
                <option id="ISIN3">C Cable</option>
                <option id="ISIN4">E Enable</option>
            </select>
        </td>
            </tr>

          </tbody>
        </table>

3
  • Y para que no me muestre el resto? por que tu log igual me muestra toda la tabla y solo necesito que me muestre la del valor selected, es decir el log me deberia mostrar solo está Escort B Babel
    – Eduard
    Commented el 18 jul. 2017 a las 15:56
  • Es que todos los selects tiene un valort seletcted aunque no no se lo espesifiques o aunque no le hayas hecho click. Por lo que ahora entiendo tu quies obtener el último que cambio su valor por que si pides el que esta seleccionado, todos estan seleccionados desde un inicio con la primer opcion A Abel
    – Lato
    Commented el 18 jul. 2017 a las 16:49
  • Ya lo solucione, gracias.
    – Eduard
    Commented el 18 jul. 2017 a las 18:27
0

Añade a las opciones de los selects un valor, el valor de elemento seleccionado va a ser el que adquiera el select.

<select id="miselect">
                <option id="ISIN1" value="A">A Abel</option>
                <option id="ISIN2" value="B">B Babel</option>
                <option id="ISIN3" value="C">C Cable</option>
                <option id="ISIN4" value="E">E Enable</option>
            </select>

Y luego obtienes el valor del select:

var valor = document.getElementById("select_id").value;

Si quieres recorrer todos los selects con un bucle, puedes utilizar igualmente el each, o poner una clase común a todos los selects y recorrerlos en función de la clase en lugar del id.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.