CODEWITHSUNDEEP
javascriptjqueryhtml
Etienne
Etienne

Reputation: 420

jQuery selector not on id

I am trying to make a selector in jQuery but all my attempts failed. Can you help me? I have a table like this

<tr>
    <td>1</td>
    <td><input id="AmontTuy1Diam" class="selectdiam"></td>
    <td><input id="AmontTuy1Long" class="selectlong"></td>
    <td><select class="MatSelectList" id="AmontTuy1Type">
        <option value="0">  </option>
        <option value="7">Value 1</option>
        <option value="8">Value 2</option>
        </select></td>
  <td><input id="AmontTuy1Rugo" class="selectrugo"></td>
</tr>

And then I have an action on the change of the select list and I want change the value of the input in the last td without accessing it by id.

$(".MatSelectList").change( function() {
     $(this).closest('tr').find(':last-child').val('test'); //doesn't work
});

I can't access it by id because the change function is executed on a class, and I have several table with this type of change value to do. Any idea

Upvotes: 1

Views: 96

Answers (2)

Lumi Lu
Lumi Lu

Reputation: 3305

Here is working example FIDDLE

$('.MatSelectList').change( function() {
      $(this).closest('tr').find('td:last input').val($('option:selected').attr('value'));
});

Upvotes: 0

Jamiec
Jamiec

Reputation: 136204

You're trying to set the val of the td, you need to select the input:

$(this).closest('tr').find('td:last input').val('test');


$(".MatSelectList").change( function() {
      $(this).closest('tr').find('td:last input').val('test'); //does work
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
    <td>1</td>
    <td><input id="AmontTuy1Diam" class="selectdiam"></td>
    <td><input id="AmontTuy1Long" class="selectlong"></td>
    <td><select class="MatSelectList" id="AmontTuy1Type">
        <option value="0">  </option>
        <option value="7">Value 1</option>
        <option value="8">Value 2</option>
        </select></td>
  <td><input id="AmontTuy1Rugo" class="selectrugo"></td>
</tr>
  </table>

Upvotes: 4

Related Questions