在选择下拉列表中设置一个值

Question

我尝试使用 jquery 在我的编辑表单中将值设置为“已选择”。 这是我的 HTML：

var leaveTypeId = $(this).closest('tr').attr('data-leaveTypeId');
$('#leave_type_edit option[value = leaveTypeId]').attr('selected', 'selected');

<div class="col-sm-8">
  <select name="leave_type" class="select2-container form-control" id="leave_type_edit">
          <option></option>
          <?php foreach ($LeaveTypes as $LeaveTypeNew):?>
          <option value="<?php echo $LeaveTypeNew->id; ?>"><?php echo $LeaveTypeNew->title; ?></option>
          <?php endforeach; ?>
        </select>
</div>

如果重要的话，选择元素会使用 select2 插件进行初始化。 任何帮助表示赞赏。谢谢。

Answer 1

你可以使用：

$('#leave_type_edit').val(leaveTypeId );

它的播放与示例相同：

$('#get-id').on('click', function () {
    let value_select = $(this).attr('data-leaveTypeId');
    $('#leave_type_edit').val(value_select);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-sm-8">
   <select name="leave_type" class="select2-container form-control" id="leave_type_edit">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
    </select>
</div>
<button id="get-id" data-leaveTypeId="2">id check</button>

Answer 2

它不会起作用，因为你没有把它作为变量，你实际输入的是字符串 leaveTypeId 而不是它的值

改变

var leaveTypeId = $(this).closest('tr').attr('data-leaveTypeId');
$('#leave_type_edit option[value = leaveTypeId]').attr('selected', 'selected');

到

var leaveTypeId = $(this).closest('tr').attr('data-leaveTypeId');
$('#leave_type_edit option[value='+leaveTypeId+']').attr('selected', 'selected');

Demo

希望对你有帮助

Answer 3

试试这个：

$('#leave_type_edit').change(function(){

var leaveTypeId = $(this).closest('tr').attr('data-leaveTypeId');

if($(this).val == leaveTypeId){
$(this).find('option').attr('selected','selected');
}
});

或者：

$('#leave_type_edit').change(function(){
var leaveTypeId = $(this).closest('tr').attr('data-leaveTypeId');

$(this).find('option[value="'+leaveTypeId+'"]').attr('selected','selected');

});

没有change，但有onload：

var leaveTypeId = 2; // for example
$('#leave_type_edit').find('option[value="'+leaveTypeId+'"]').attr('selected','selected');

Working Demo