Question

我是jQuery的新手，并且认为我接近我需要的东西。

我需要从data-status获取值，然后设置正确的select选项并选择。

＆＃13;

// set default status
$('.column.small').each(function() {
  var $currentStatus = $(this);
  var optionStatus = $currentStatus.data('status');
  // u = updated
  // n = new
  if (optionStatus == 'u') {
    foundStatus = $currentStatus.find('select option');
    if ($(foundStatus).val() == 'u') {
      $(this).attr('selected', 'selected');
    } else if ($(foundStatus).val() == 'n') {
      $(this).attr('selected', 'selected');
    }
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-status="u" class="column small grey" selected="selected">
  <div class="form-group">
    <select id="PC_Row_1_Status" name="PC_Row_1_Status" ccm-passed-value="u" class="form-control">
      <option value="u" selected="selected">Updated</option>
      <option value="n">New</option>
    </select>
  </div>
</div>
<div data-status="u" class="column small grey" selected="selected">
  <div class="form-group">
    <select id="PC_Row_2_Status" name="PC_Row_2_Status" ccm-passed-value="u" class="form-control">
      <option value="u" selected="selected">Updated</option>
      <option value="n">New</option>
    </select>
  </div>
</div>
<div data-status="n" class="column small grey" selected="selected">
  <div class="form-group">
    <select id="PC_Row_3_Status" name="PC_Row_3_Status" ccm-passed-value="u" class="form-control">
      <option value="u" selected="selected">Updated</option>
      <option value="n">New</option>
    </select>
  </div>
</div>
<div data-status="n" class="column small grey" selected="selected">
  <div class="form-group">
    <select id="PC_Row_4_Status" name="PC_Row_4_Status" ccm-passed-value="u" class="form-control">
      <option value="u" selected="selected">Updated</option>
      <option value="n">New</option>
    </select>
  </div>
</div>

＆＃13;

Answer 1

您应该只使用.val()方法来设置元素的值。

// set default status
$('.column.small').each(function() {
      var $currentStatus = $(this);
      var optionStatus = $currentStatus.data('status');
      $currentStatus.find('select').val(optionStatus);
});

// set default status
$('.column.small').each(function() {
  var $currentStatus = $(this);
  var optionStatus = $currentStatus.data('status');
  $currentStatus.find('select').val(optionStatus);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-status="u" class="column small grey" selected="selected">
  <div class="form-group">
    <select id="PC_Row_1_Status" name="PC_Row_1_Status" ccm-passed-value="u" class="form-control">
      <option value="u" selected="selected">Updated</option>
      <option value="n">New</option>
    </select>
  </div>
</div>
<div data-status="u" class="column small grey" selected="selected">
  <div class="form-group">
    <select id="PC_Row_2_Status" name="PC_Row_2_Status" ccm-passed-value="u" class="form-control">
      <option value="u" selected="selected">Updated</option>
      <option value="n">New</option>
    </select>
  </div>
</div>
<div data-status="n" class="column small grey" selected="selected">
  <div class="form-group">
    <select id="PC_Row_3_Status" name="PC_Row_3_Status" ccm-passed-value="u" class="form-control">
      <option value="u" selected="selected">Updated</option>
      <option value="n">New</option>
    </select>
  </div>
</div>
<div data-status="n" class="column small grey" selected="selected">
  <div class="form-group">
    <select id="PC_Row_4_Status" name="PC_Row_4_Status" ccm-passed-value="u" class="form-control">
      <option value="u" selected="selected">Updated</option>
      <option value="n">New</option>
    </select>
  </div>
</div>

jQuery获取数据属性并设置正确的选定选项

1 个答案: