How to populate second option

Question

I am trying to make a script where I populate a second select according to the first <select> option.

For example, if I select Category 1 on the first <select>, I need the second one to be populated with Subcategory 1.1, Subcategory 1.2, etc.

Here is my code:

<select id="category">
    <option value="">Select Category</option>
    <option value="1">Category 1</option>
    <option value="2">Category 2</option>
    <option value="3">Category 3</option>
</select>

<select id="subcategory">
    <option value=""></option>
</select>

I am trying to do this with jquery. Can someone help me with this?

Start here: [jQuery Get Selected Option From Dropdown](http://stackoverflow.com/questions/10659097/jquery-get-selected-option-from-dropdown) — T3 H40, Feb 19 '16 at 07:42
Don't know where to start really. I am a begginer in jQuery. — Andrei Răileanu, Feb 19 '16 at 07:42

score 2 · Accepted Answer · answered Feb 19 '16 at 07:47

var categories = [
    {
       value: '1',
       name: 'Category 1',
       subCategories: [{
           value: '1.1',
           name: 'Sub 1.1'
       }, {
           value: '1.2',
           name: 'Sub 1.2'
       }]
    }, {
       value: '2',
       name: 'Category 2',
       subCategories: [{
           value: '2.1',
           name: 'Sub 2.1'
       }, {
           value: '2.2',
           name: 'Sub 2.2'
       }]
    }
];

var $categorySelect =  $("#category");
var $subCategorySelect =  $("#subcategory");

// populate categories with options
categories.forEach(function(category) {
    var $option = $('<option/>').attr('value', category.value).html(category.name);
    $categorySelect.append($option);
});

$categorySelect.on('change', function() {
    // clean subcategory select from older options
    $subCategorySelect.empty();
  
    // find selected category
    var selectedCategoryValue = $categorySelect.val();
    var category = categories.find(function(category) {
        return category.value == selectedCategoryValue;
    });
  
    // if category found - populate subcategory select
    if (category) {
        category.subCategories.forEach(function(subcategory) {
            
            // you can extract this line into separate function
            var $option = $('<option/>').attr('value', subcategory.value).html(subcategory.name);
            
            $subCategorySelect.append($option);
        });
    }
    
})

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

<select id="subcategory">
    <option value=""></option>
</select>

score 0 · Answer 2 · answered Feb 19 '16 at 07:44

Check this simple example

$('#category').change(function(){
  var options = '<option value="'+$('#category').val()+'">'+$('#category').val()+'</option>';
  $('#subcategory').append(options);
});

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<select id="category">
    <option value="">Select Category</option>
    <option value="1">Category 1</option>
    <option value="2">Category 2</option>
    <option value="3">Category 3</option>
</select>
<select id="subcategory">
    <option value=""></option>
</select>
</body>
</html>

How to populate second according to first option

2 Answers2

How to populate second option