使用JS / jQuery来操作选项列表，其中名称是数组

Question

假设我有一个名为 batters [] 的选项列表，它们都是相同的列表。示例代码可能是：

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

......等等。

我想要一个客户端实现，我从另一个列表中选择一些东西，比如说：

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

然后将“batters”列表修改为代表该团队的预定义阵容。编写一些JS / jQuery的最佳方法是什么，可以看到“团队”选择更改然后修改“batters []”列表的每个值？这是否可以在击球手中使用数组作为名称？

希望这是有道理的。谢谢！

Answer 1

作为地图从团队名称存储到团队成员的团队：

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

演示：http://jsfiddle.net/mattball/UU99R/

---

或者，只是一组团队（更像是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];

演示：http://jsfiddle.net/mattball/HBSU8/

Answer 2

你可以这样做：

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

更改

<select name="batters[]">

到

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

脚本代码如：

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