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!

Matt Ball · Accepted Answer · 2011-07-12 10:40:43Z

2

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/

edited Jul 12, 2011 at 10:40

answered Jul 11, 2011 at 23:58

Matt Ball

361k102 gold badges655 silver badges725 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Michael B Over a year ago

Looks promising. Can you expand a bit? For example, let's say I want to bind 9 players to the Cleveland Indians lineup (value 1) which get reflected in the batters[] lineup. Can you provide some psuedocode or a snippet that would do that? I'm a bit lost on the actual implementation/porting of the snippet you wrote.

Felix Kling Over a year ago

You don't need to escape the [] inside the value for name, but you should put the values in quotes: select[name="batters[]"]. They are mandatory in attribute selectors.

Michael B Over a year ago

That's very close to what I want - originally I wanted the ability to have 100% of the batters in each SELECT and the team just pushes the value to each box. Meaning each box has {a, b, c} and when team A is picked containing {a, c, l} it pushes {a} to the first box, {c} to the second, {l} to the third, while maintaining {a, b, c... n, n+1} in the boxes (instead of removing them, as in your code). Is this possible? Regardless, +1.

Michael B Over a year ago

Never mind. It's actually just feature creep for what I want. Your answer solves my problem in a very elegant fashion. Thanks!

Felix Kling Over a year ago

It works for me without escaping them: jsfiddle.net/fkling/HBSU8/4 or am I missing something? It should work because at this position, sizzle does not expect selectors.

|

Laurent T · Accepted Answer · 2011-07-12 00:13:54Z

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
    });
  }); 
});

answered Jul 12, 2011 at 0:13

Laurent T

1,0984 gold badges14 silver badges26 bronze badges

1 Comment

Michael B Over a year ago

OK, so I use an AJAX call to get a JSON object with an array of batters that match the team. How do I change the batters[] select options with those values?

zb' · Accepted Answer · 2011-07-12 00:05:26Z

0

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);
}}));

answered Jul 12, 2011 at 0:05

zb'

8,0793 gold badges44 silver badges68 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

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

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

6 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

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

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

6 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related