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

Question

我有以下问题：

我正在调用一个带有表单的引导模式。该表单带有一个下拉列表，如下所示：

<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

您想多了，您不需要在option 上删除或添加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

Answer 2

试试这个：

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