Using JS/jQuery to manipulate option select list where the name is an array

Question

Let's say I have a list of selects that are all named batters[] which are all identical lists. Sample code might be:

<select name="batters[]"> 
    <option value="945">Bobby Abreu</option> 
    <option value="808">Erick Almonte</option> 
</select>
<select name="batters[]"> 
    <option value="945">Bobby Abreu</option> 
    <option value="808">Erick Almonte</option> 
</select>
<select name="batters[]"> 
    <option value="945">Bobby Abreu</option> 
    <option value="808">Erick Almonte</option> 
</select>

... and so forth.

I want a client-side implementation where I select something from another list, say:

<select name="teams"> 
    <option value="1">Cleveland Indians</option> 
    <option value="2">Boston Red Sox</option> 
</select>

Which then modifies the "batters" lists to a pre-defined lineup that represents that team. What's the best way to write some JS/jQuery that can see when the "teams" select changes and then modifies each value of the "batters[]" list? Is this possible using an array for the name in batters ?

Hope this makes sense. Thanks!

Answer 1

Teams stored as a map from team name to team players:

var teams = {
    'Cleveland Indians': [
        {name: 'Bobby Abreu', value: 945},
        {name: 'Erick Almonte', value: 808},
        {name: 'Sammy Sosa', value: 999}
    ],
    'Boston Red Sox': [
        {name: 'Kurt Schilling', value: 38},
        {name: 'Babe Ruth', value: 42},
        {name: 'Mark McGuire', value: 101}
    ]
};

$('select[name=teams]').change(function ()
{
    var team = teams[$(this).val()];
    $('select[name="batters[]"]').html
    (
        $.map(team, function (elt, i)
        {
            return '<option value="' + elt.value + '">'
                    + elt.name + '</option>';
        }).join('')
    );
}).change();

Demo: http://jsfiddle.net/mattball/UU99R/

---

Or, just an array of teams (more like the code in the OP):

var teams = [
    [
        {name: 'Bobby Abreu', value: 945},
        {name: 'Erick Almonte', value: 808},
        {name: 'Sammy Sosa', value: 999}
    ],
    [
        {name: 'Kurt Schilling', value: 38},
        {name: 'Babe Ruth', value: 42},
        {name: 'Mark McGuire', value: 101}
    ]
];

// just change
var team = teams[$(this).val()];
// to
var team = teams[this.selectedIndex];

Demo: http://jsfiddle.net/mattball/HBSU8/

Answer 2

You could do something like this:

$(document).ready(function(){
  $("select[name='teams']").change(function(e){
    var teamId = e.target.value;
    console.log(e.target.value);

    $.ajax({
       //your url
       //the data you wanna pass I suppose: teamId
       //method type: GET or POST
       //datatype: let's say your backend returns some JSON you would say JSON
        //Finally in the successCallback you would process that JSON object and populate each of your select
    });
  }); 
});

Answer 3

change

<select name="batters[]">

to

<select id='batters_select' name="batters[]">

script code like:

batters[1]={{num: 443,name: "Batter Best"},{num: 443,name: "Batter Worst"}}
$(function() {
$('select:[name="teams"]').change(function() {
var me=$(this);
var options='';
var v=me.val();
for (var batter in batters[v]){
options+='<option value='+batter.num+'>'+batter.name+'</option>'
}
$('#batters_select').html(options);
}}));