JQuery set select from string

Question

I have the following table

<table id="table_device">
    <tr>
        <td> First td </td>
        <td> Second td </td>
        <td> 
            <select class="base_MD">
                <option>A value</option>
                <option>Another value</option>
                <option>And another one</option>
                ...
            </select> 
        </td>
        <td> The value </td>
    </tr>
    <tr></tr>
    <tr></tr>
    ...
</table>

How do I set the <select> where the <option> matches with the 4th child (named 'The value') for each <tr> tag?

EDIT

I tried the following

        $('#table_device').find('tr').each(function()
        {
            var value = $(this).find(':nth-child(4)').html();

            $('select').each(function()
            {
                if($(this).text() == value)
                {
                    var id = $(this).val();
                }

                $(this).eq(id).prop('selected', true);
            })
        });

But it did not work ... I'm sure it's not that complicated but my head will explode soon

What have you tried? What parts of the API have you looked at? — T.J. Crowder
– T.J. Crowder, Commented Jul 27, 2015 at 14:20

Milind Anantwar · Accepted Answer · 2015-07-27 14:38:57Z

1

You can iterate over each select element. get the text from next td and use it to set option by text. Like this:

$('#table_device select').each(function(){
 var nexttdtext = $(this).parent().next('td').text();
  $(this).find("option").filter(function() {
     return this.text == nexttdtext; 
  }).attr('selected', true);
});

Working Demo

answered Jul 27, 2015 at 14:38

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Atnaize Over a year ago

I have another select tag on each tr. Do I have to set a class or ID to the select that I want to setup ?

Milind Anantwar Over a year ago

not required. check the demo. it exactly does what you want

GreyRoofPigeon · Accepted Answer · 2015-07-27 14:22:01Z

Bind an onchange event to the list. Find the selected option and the text inside it. And put it in the first row, last cell...

$(function() {
  $('.base_MD').on('change', function() {
    var value = $(this).find(':selected').text();
    $('#table_device tr:first-child td:last-child').text( value );
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table_device">
    <tr>
        <td> First td </td>
        <td> Second td </td>
        <td> 
            <select class="base_MD">
                <option>A value</option>
                <option>Another value</option>
                <option>And another one</option>
                ...
            </select> 
        </td>
        <td> The value </td>
    </tr>
    <tr></tr>
    <tr></tr>
    ...
</table>

Collectives™ on Stack Overflow

JQuery set select from string

EDIT

2 Answers 2

Working Demo

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

EDIT

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related