Bring item of selected select and model value

0

I have this table in 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>

and this form I bring what is selected in the select and the 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);

    })
});

});

The error that I have is that they all come to me in the log, and not only the one that is selected

example of the serious log: Corolla b Bable

    
asked by Eduard 14.07.2017 в 05:19
source

2 answers

1

Titles put them inside a thead element

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

The model is in column 1 and you in the log are getting the value of column 0 that is the brand

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

To put the model and the selected option as Corolla b Bable would be something like this:

$(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>
    
answered by 14.07.2017 / 17:43
source
0

Add a value to the options of the selects, the selected element value will be the one that acquires the 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>

And then you get the value of the select:

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

If you want to go through all the selects with a loop, you can also use the each, or put a class common to all selects and browse them based on the class instead of the id.

    
answered by 14.07.2017 в 07:10