从对象中的 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

将所选选项的文字link改为属性;

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

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

Get the first value from a javascript array within an object

javascript

jquery

arrays

object

CLICK FOR DEMO