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

Question

I am new to jQuery and think I'm close to what I'm needing.

I need to get the value from the data-status and then set the correct select option and selected.

 // 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'); } } }); 

 <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> 

Answer 1

You should simply use .val() method to set the value of element.

// 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>