I've got following problem:

I'm calling a bootstrap modal with a form in it. The form es with a dropdown and looks like following:

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

I added a piece of jquery with adds selected="selected"to a specific option, which i want to be selected by default. When i submit the form, this option seems to be selected, but no matter which option gets selected by my script: The Text in the Select Field is always "Sample Requirement" (the first one)

Do you have an idea, how to change that? My jQuery Code is following:

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

I've got following problem:

I'm calling a bootstrap modal with a form in it. The form es with a dropdown and looks like following:

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

I added a piece of jquery with adds selected="selected"to a specific option, which i want to be selected by default. When i submit the form, this option seems to be selected, but no matter which option gets selected by my script: The Text in the Select Field is always "Sample Requirement" (the first one)

Do you have an idea, how to change that? My jQuery Code is following:

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

• javascript
• jquery
• html
• twitter-bootstrap

2 Answers 2

You are overthinking it, you don't need to remove or add a selected attribute on the option. All you need to do is use val() on the select and let jQuery do the work for you.

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

In your case it seems to be:

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

Assuming .add_feature has a data-requirement containing the value of the option to select (2, 3, or 5)

Fiddle

If you do want to do without val(), just change attr() to prop() in your code and the removeAttr() bees unnecessary:

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

Fiddle

Try this:

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