javascript - 使用 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 属性。您需要做的就是在 select 上使用 val() 并让 jQuery 为您完成工作。

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

在你的情况下它似乎是:

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

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

Fiddle

如果您不想使用 val()，只需将代码中的 attr() 更改为 prop() 并且 removeAttr() 变得不必要了:

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

Fiddle