将选择选项值设置为变量

时间:2012-09-18 19:05:56

标签: javascript object methods mootools option

是否可以将Select Option的值设置为等于预定义变量,然后使用其方法?这是一个例子:

<select class='hidden' id='teamChoice' onchange='chooseTeam()'>
<option value="" selected>What team</option>
    <option value='bostonCeltics'>Boston Celtics</option>
</select>


var bostonCeltics = {
    conferencePA: "5=Conference=Eastern",
    divisionPA: "5=Division=Atlantic"
}

function chooseTeam() {
    switch ($('teamChoice').selectedIndex) {
        case 0:
            break;
        case 1:
            $('PAType=Name=Value3').innerHTML = this.conferencePA;
            break;
    }
}

理想情况下,在选择名为Boston Celtics的选项时,我可以使用一种方法来访问变量对象bostonCeltics的不同属性。这可能吗?

1 个答案:

答案 0 :(得分:1)

我不是Mootools的用户,但我想我明白你的目标是什么,相信我能指出你正确的方向。

在Javascript中,您可以使用数组表示法访问任何对象属性目录。换句话说,给定foo = { bar: 1, baz: 2 },以下内容是等效的:

console.log( foo.bar );      // prints 1
console.log( foo["bar"] );   // prints 1
var s = "bar";
console.log( foo[s] );       // prints 1

事情变得棘手,因为您将bostonCeltics定义为var,这意味着它不一定是任何对象的属性。尽管不鼓励使用eval,您仍然可以使用eval完成所需的操作:

var s = "bostonCeltics";
console.log( eval( s + ".conferencePA" ) );    // prints "5=Conference=Eastern"

就个人而言,我会将bostonCeltics移动到父对象中,并使用数组表示法来访问其属性,然后您想要做的事情非常简单。即:

var teams = {
    bostonCeltics = {
        conferencePA: "5=Conference=Eastern",
        divisionPA: "5=Division=Atlantic"
    }       
    // more teams go here
}

function chooseTeam() {
    var tc = $('teamChoice');
    var val = tc[tc.selectedIndex].value;
    console.log( teams[val].conferencePA );    // prints "5=Conference=Eastern"
}

这是一个实际操作中的jsFiddle:http://jsfiddle.net/sQvBZ/

我希望这能得到你所要求的核心。