Javascript - select value in selector from array

Question

I'm trying to auto select an option in a <select> with an array.

My array

var students = [
    [1, "John Doe"],
    [3, "Mike Tyson"],
    [4, "Vin Diesel"],
];

My Form

<form>
    <fieldset>
        <select>
            <option value="1">John Doe</option>
            <option value="2">Myke Tyson</option>
            <option value="3">Vin Diesel</option>
            <option value="4">Michael Jackson</option>
            <option value="5">50 Cent</option>
        </select>
    </fieldset>
    <fieldset>
        <select>
            <option value="1">John Doe</option>
            <option value="2">Myke Tyson</option>
            <option value="3">Vin Diesel</option>
            <option value="4">Michael Jackson</option>
            <option value="5">50 Cent</option>
        </select>
    </fieldset>
    <fieldset>
        <select>
            <option value="1">John Doe</option>
            <option value="2">Myke Tyson</option>
            <option value="3">Vin Diesel</option>
            <option value="4">Michael Jackson</option>
            <option value="5">50 Cent</option>
        </select>
    </fieldset>
    <input type="submit" value="Save" />
</form>

I need to auto select an option for each <select> if present in my array:

John Doe (for first <select>)
Myke Tyson (for second <select>)
Vin Diesel (for third <select>)

How can I do this?

how can you tell which select the value to be selected from? — guradio
– guradio, Commented Mar 29, 2016 at 8:22
Well. This is going to come down to reading the selected option, and with conditional statements or a switch, choosing the appropriate index within your array. — user1893702
– user1893702, Commented Mar 29, 2016 at 8:25

Satpal · Accepted Answer · 2016-03-29 08:25:19Z

You can use a simple loop with .eq() to filter the select element, then .val() to set the value.

for (var i = 0; i < students.length; i++) {
  $('select').eq(i).val(students[i][0]);
}

var students = [
  [1, "John Doe"],
  [3, "Mike Tyson"],
  [4, "Vin Diesel"],
];

for (var i = 0; i < students.length; i++) {
  $('select').eq(i).val(students[i][0]);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <fieldset>
        <select>
            <option value="1">John Doe</option>
            <option value="2">Myke Tyson</option>
            <option value="3">Vin Diesel</option>
            <option value="4">Michael Jackson</option>
            <option value="5">50 Cent</option>
        </select>
    </fieldset>
    <fieldset>
        <select>
            <option value="1">John Doe</option>
            <option value="2">Myke Tyson</option>
            <option value="3">Vin Diesel</option>
            <option value="4">Michael Jackson</option>
            <option value="5">50 Cent</option>
        </select>
    </fieldset>
    <fieldset>
        <select>
            <option value="1">John Doe</option>
            <option value="2">Myke Tyson</option>
            <option value="3">Vin Diesel</option>
            <option value="4">Michael Jackson</option>
            <option value="5">50 Cent</option>
        </select>
    </fieldset>
    <input type="submit" value="Save" />
</form>

Collectives™ on Stack Overflow

Javascript - select value in selector from array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related