Option not selecting automatically when going back

Question

I apologize if this has already been answered. I'm still kind of learning as I go. I have searched and been unable to find a solution that works for me. I had found this one:

Firefox ignores option selected="selected"

But adding autocomplete="off" did not work for me.

Users should be able to choose an option, submit, and then when they go back have their selected option be available. This is currently working in Safari, Chrome, and Opera but not working in Firefox or IE. The select works fine, but it doesn't automatically select their choice when they go back.

I have another select on the same page which doesn't appear to have the same issue.

Here is the HTML:

<div class="col-sm-2 col-md-2">
    <div class="form-group">
    <label for="custom_1_units">Units</label>
        <select class="form-control" id="custom_1_units" name="custom_1_units" value="<?php echo"_SESSION['Custom']['custom_1_units'];" ?>" autocomplete="off">
            <option value="pages">pages</option>
            <option value="lessons">lessons</option>
            <option value="activities">activities</option>
            <option value="units">units</option>
            <option value="projects">projects</option>
        </select>
    </div>  
</div>

And here is the PHP/Javascript. It's on a .php file:

<?php echo "var cus_1_units ='" . $_SESSION['Custom']['custom_1_units'] . "';"; ?>

$("#custom_1_units").each(function() {
if($(this).text() == cus_1_units) {
    $(this).attr('selected', 'selected');            
    }                        
});

4 year old bug sure that still applies - will have to test – Jul 21 '15 at 22:05 — , Jul 21 '15 at 22:05
You are applying the `selected` attribute to the ` – Sparky Jul 21 '15 at 22:21 — Sparky, Jul 21 '15 at 22:21

score 1 · Accepted Answer · answered Jul 21 '15 at 22:17

1

The desired option is not selected because your loop is incorrect. It currently loops through an element(?), but I think you want it to loop through its children. Change the loop to the following:

$("#custom_1_units").children("option").each(function() {

answered Jul 21 '15 at 22:17

FWDekker

1,823
2
20
26

I was doubtful about this because I'd basically just copied and pasted the code from another select on the same page and just updated the id. I can't argue with results though. I tested it and it passed in every browser I tried. – Trav.is.awesome Jul 21 '15 at 22:34

score 0 · Answer 2 · answered Jul 21 '15 at 22:29

0

The value of your option elements matches the text in the element, so you can probably get away with simply setting the value of the select element:

$("#custom_1_units").val(cus_1_units);

answered Jul 21 '15 at 22:29

Troy

1,799
3
20
29

Option not selecting automatically when going back

2 Answers2