从对象中的javascript数组中获取第一个值

Question

CLICK FOR DEMO

在下面的示例中，我无法让pick[0]检索到正确的值。

如果使用其中一个对象值（例如pick[0]）对A[0]进行硬编码，则代码将按预期工作。

问题

如何根据所选的数组从javascript对象中检索第一个数组值？

JQUERY

var pick = $( "#select option:selected" ).text(),
    myArray = {
      A: ['#004d94', '#0073b9'],
      B: ['#f6f0c1', '#b9cdaf']
    };

$(function () {
    $('.Bx').css('background', myArray.pick[0]);
    $('.Tx').text(pick);
});

Answer 1

将所选选项的文本链接到相应的属性;

$('.Bx').css('background', myArray[$("#select option:selected").text()][0]);

Answer 2

您需要在更改处理程序中选择值：

myArray[this.value][0]

<强> 段 ：

var myArray = {
      A: ['#004d94', '#0073b9'],
      B: ['#f6f0c1', '#b9cdaf']
    };


$('#select').change(function () {
    $('.Bx').css('background', myArray[this.value][0]);
    $('.Tx').text(this.value + " = " + myArray[this.value][0]);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select">
  <option value="A">A</option>
  <option value="B">B</option>
</select>

<div class="Bx">COLOUR CHANGE</div>
SELECTED: <div class="Tx"></div>

---

根据评论，如果你需要预先填充页面加载..只需确保第一个选项是selected，然后选择它。

像这样 ：

var myArray = {
      A: ['#004d94', '#0073b9'],
      B: ['#f6f0c1', '#b9cdaf']
    };


goChange($("#select")[0].value);

$('#select').change(function () {
    goChange(this.value);
});

function goChange(val) {
    $('.Bx').css('background', myArray[val][0]);
    $('.Tx').text(val);  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select">
  <option value="A" selected>A</option>
  <option value="B">B</option>
</select>

<div class="Bx">COLOUR CHANGE</div>
SELECTED: <div class="Tx"></div>