Traer item del select seleccionado y el valor del model

publicado por: Anonymous

Tengo esta tabla en html

_x000D_

_x000D_

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

_x000D_

_x000D_

_x000D_

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

solución

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í:

_x000D_

_x000D_

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

_x000D_

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

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *