使用jquery更改显示的选择选项

Question

我有以下问题:

我正在调用带有表单的bootstrap模态.该表单附带一个下拉列表,如下所示:

<select id="requirement_id" name="requirement_id">
    <option value="2">Sample     Requirement</option>
    <option value="3">Second Req</option>
    <option value="5">New Req</option>
</select>

我添加了一个jquery添加selected="selected"到特定选项,我想默认选择它.当我提交表单时,似乎选择了此选项,但无论我的脚本选择了哪个选项:选择字段中的文本始终是"样本要求"(第一个)

你有一个想法,如何改变它？我的jQuery代码如下:

$('.add_feature').click(function(){
    $('#requirement_id option').each(function(){
      $(this).removeAttr('selected');
    });
    $('#requirement_id').find('option[value="'+$(this).data('requirement')+'"]').attr('selected', 'selected');
  });

Answer 1

你是在思考它,你不需要删除或添加selected属性option.所有你需要做的是使用val()上select,让jQuery的做的工作适合你.

$('#requirement_id').val(valueOfOptionToSelect));

在你的情况下似乎是:

$('#requirement_id').val($(this).data('requirement'));

假设.add_feature有一个data-requirement包含要选择的选项的值(2,3或5)

小提琴

如果你想这样做没有val(),只是改变attr()对prop()你的代码和removeAttr()不需要:

$('#requirement_id').find('option[value="' + $(this).data('requirement') + '"]').prop('selected', 'selected');

小提琴