converting javascript array to a dropdown - jquery

Question

I wanted to create dynamic dropdowns in which the values are changed based on the first dropdown.

Suppose I have a dropdown with three values namely One, Two and Three.

When I select One. I have a javascript array and that values in that array needs to be appeared as a second dropdown in the webpage.

Here's the Fiddle.

I have no idea where to start or how to start.

I googled and the result i got is creating a dropdown using ul not from a javascript array.

Any help will be very much helpful for me to overcome this.

Stuck for 2 days and I still didn't get any idea on how to do it.

Thanks in advance.

this could be improved upon, but this should point you in the right direction jsfiddle.net/tcTwL/2 — CrayonViolent
– CrayonViolent, Commented Mar 31, 2014 at 4:34
@Crayon - Thanks a lot. That helped me out. Post that as answer please. — Unknown User
– Unknown User, Commented Mar 31, 2014 at 4:41

CrayonViolent · Accepted Answer · 2014-03-31 04:43:18Z

2

this could be improved upon, but this should point you in the right direction. Here's the js fiddle

<script src='jquery.js'></script>

<select class="dropdown">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>
<select class="dropdown2">
</select>

<script>
$(document).ready(function() {
  var dropdown2 = {
    1 : ['Four', 'Five', 'Six'],
    2 : ['Seven', 'Eight', 'Nine'],
    3 : ['Ten', 'Eleven', 'Twelve']
  }
  $('.dropdown').on('change',function() {
    $('.dropdown2').html(
      '<option>'+dropdown2[$(this).val()].join('</option><option>')+'</option>'
    );
  });
});
</script>

answered Mar 31, 2014 at 4:43

CrayonViolent

32.6k6 gold badges61 silver badges80 bronze badges

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

1 Comment

Unknown User Over a year ago

I wanted to add an value attribute with same values in the array. How do I do it? Tried concatinating the data[$(this).val()].join() by adding value attribute like this '<option value="' + data[$(this).val()].join() + '">'. But the result I got is value='Four,Five,Six'. Help me.

Mosho · Accepted Answer · 2014-03-31 04:42:06Z

2

http://jsfiddle.net/tcTwL/5/

var data = {
    one: ['Four', 'Five', 'Six'],
    two: ['Seven', 'Eight', 'Nine'],
    three: ['Ten', 'Eleven', 'Twelve']
}

$('.dropdown').change(function () {
  $('.dropdown2').remove();
  var newSel = $(this).after('<select class="dropdown2" />'); 
  var option = $('.dropdown').find(":selected").text();
  data[option.toLowerCase()].forEach(function(opt){$('.dropdown2').append('<option>' + opt + '</option>')});
})

Fairly straightforward. remove any older dropdown created, get the option value, and add new options. It's kinda verbose, but it works.

answered Mar 31, 2014 at 4:42

Mosho

7,0783 gold badges36 silver badges52 bronze badges

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

Check this `demo jsFiddle`

jQuery

$(document).ready(function() {
    var dropdown1 = {
        1 : ['Four', 'Five', 'Six'],
        2 : ['Seven', 'Eight', 'Nine'],
        3 : ['Ten', 'Eleven', 'Twelve']
    }
    $('.dropdown1').html(
            '<option>'+dropdown1[1].join('</option><option>')+'</option>'
        );
    $('.dropdown').on('change',function() {
        $('.dropdown1').html(
            '<option>'+dropdown1[$(this).val()].join('</option><option>')+'</option>'
        );
    });
});

HTML

<select class="dropdown">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>
<select class="dropdown1">

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Mar 31, 2014 at 4:47

Jaykumar Patel

27.7k12 gold badges79 silver badges76 bronze badges

Collectives™ on Stack Overflow

converting javascript array to a dropdown - jquery

3 Answers 3

1 Comment

Comments

Check this `demo jsFiddle`

jQuery

HTML

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Check this demo jsFiddle

jQuery

HTML

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

Check this `demo jsFiddle`