为jquery中所有选中的行设置“选择”选项？

Question

Still learning jquery here, so forgive any ignorance.

I have a table that contains a number of rows. Each row has a <select> tag and I want to "toggle" its value when I execute a function. So here's what the table looks like for example:

<table align="center" class="table table-bordered table-hover table-condensed table-responsive">
  <thead>
    ...
  </thead>
  <tbody>
    <tr>
      <td class="text-center"><input id="item_ids_" name="item_ids[]" type="checkbox" value="11521"></td>
      <td class="text-center">Item value here</td>
      <td class="text-center">
        <select class="form-control" id="item_11521_color" name="item[11521][color]">
          <option selected="selected" value="None">None</option>
          <option value="Blue">Blue</option>
          <option value="Orange">Orange</option>
          <option value="Green">Green</option>
          <option value="Yellow">Yellow</option>
          <option value="Purple">Purple</option>
        </select>
      </td>
      <td class="text-center">
        <select class="form-control" id="item_11521_test" name="item[11521][test]">
          <option selected="selected" value="None">None</option>
          <option value="First">First</option>
          <option value="Second">Second</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>

How can I iterate through each row and change the value (and text) <option value="Blue"> to <option value="Orange"> etc each time I run this function?

Answer 1

Is this what you are looking for? (code updated)

$("#change").on("click", function() {

    // loop throw all rows
    $("table tr").each(function() {

        // on a row, find the checkbox and change the values if it's checked
        if($(this).find("input[type='checkbox']").prop("checked")) {
            $(this).find(".color-select").val("Green");
            $(this).find(".position-select").val("First");
        } 

    });

});

Added a button to perform the change:

<button id="change">change all to Green and first</button>

And classes to the selects for simplicity:

<select class="form-control color-select" id="item_11521_color" name="item[11521 [color]">
<select class="form-control position-select" id="item_11521_test" name="item[11521][test]">

EDIT:

Made required changes to the code.

The updated fiddle: http://jsfiddle.net/theagitator/44vqugf0/1/