Get the first value from a javascript array within an object

Question

CLICK FOR DEMO

In the example below I am unable to get pick[0] to retrive the correct value.

If pick[0] is hardcoded with one of the object values e.g A[0] the code works as expected.

QUESTION

How can I retrieve the first array value from the javascript object depending on the array selected?

JQUERY

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

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

Abhitalks · Accepted Answer · 2015-01-08 12:52:44Z

2

You need to pick the value inside the change handler:

myArray[this.value][0]

Snippet:

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>

As per the comments, if you need to pre-populate on page load.. just make sure the first options is selected and then pick that up.

Something like this:

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>

edited Jan 8, 2015 at 12:52

answered Jan 8, 2015 at 12:43

Abhitalks

28.5k6 gold badges61 silver badges82 bronze badges

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

2 Comments

DreamTeK Over a year ago

Thanks for the good answer however I also need to populate on page load. Is it not possible to use a variable in this case?

Abhitalks Over a year ago

Not really. Just pick the selected one from the dropdown. Just a second updating the answer.

Alex K. · Accepted Answer · 2015-01-08 12:42:10Z

2

To link the text of the selected option to the corresponding property;

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

answered Jan 8, 2015 at 12:42

Alex K.

177k32 gold badges276 silver badges299 bronze badges

2 Comments

DreamTeK Over a year ago

Thanks alex I tried this previously and know it works however I am attempting to change to a variable to to prevent having to repeat code. The $("#select option:selected").text() will be used many times in my actual script. Can I use a variable and if not do you know why?

Alex K. Over a year ago

$("option:selected", this) is an alternative or abhitalks solution.

Collectives™ on Stack Overflow

Get the first value from a javascript array within an object

CLICK FOR DEMO

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related