jquery replace select options with values associative array

Question

I want to change the options of select2 based on the choice in select1. Therefore I made a associative array like this:

var rubrieken = {'1': '<option value="10">Rubriek 10</option><option value="20">Rubriek 20</option>','2': '<option value="30">Rubriek 30</option><option value="40">Rubriek 40</option>'};

So if in select1 option 2 is selected, the current values of select2 have to be replaced with the options with key 2. Im made the Jquery below, but how to extract the options from the array an put them in the select?

var rubrieken = {'1': '<option value="10">Rubriek 10</option><option value="20">Rubriek 20</option>','2': '<option value="30">Rubriek 30</option><option value="40">Rubriek 40</option>'};
$( document ).ready(function() {
    //Bij keuze categorie de rubrieken vullen 
    $("#select1").change(function(){
        //maak de huidige select leeg
        $('#select2').empty();
        //selectie uit array van juiste waarden
        $newoptions = "<option>NewO1</option><option>NewO1</option>";
        //vul de select rubriek op basis van categorie keuze    
        $('select#select2').html($newoptions);
    }); 
});

and what are values in select1 options . is it 1 and 2 ?

Amit Kumar
– Amit Kumar

2017-10-13 09:13:52 +00:00
Commented Oct 13, 2017 at 9:13 — Amit Kumar
– Amit Kumar, Commented Oct 13, 2017 at 9:13
Would comment your html also

Munkhdelger Tumenbayar
– Munkhdelger Tumenbayar

2017-10-13 09:14:33 +00:00
Commented Oct 13, 2017 at 9:14 — Munkhdelger Tumenbayar
– Munkhdelger Tumenbayar, Commented Oct 13, 2017 at 9:14

Taufik Nur Rahmanda · Accepted Answer · 2017-10-13 09:37:32Z

2

Please try this!

var rubrieken = {
    '1': '<option value="10">Rubriek 10</option><option value="20">Rubriek 20</option>',
    '2': '<option value="30">Rubriek 30</option><option value="40">Rubriek 40</option>'
};

$(function() {
    $("#select1").change(function() {
        var key = $(this).val();
        var newoptions = rubrieken[key];
        $('#select2').html(newoptions);
    }); 
});

Note:

You won't need $('#select2').empty(); because .html() will replace the content.

Good luck!

edited Oct 13, 2017 at 9:37

answered Oct 13, 2017 at 9:22

Taufik Nur Rahmanda

1,9992 gold badges23 silver badges37 bronze badges

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

3 Comments

Jilco Tigchelaar Over a year ago

Why not use numbers in the array?

Taufik Nur Rahmanda Over a year ago

javascript object type have slightly different purpose with normal array, object's key usually to be a string/name. but if you want just normal array, you can define as simple:

var rubrieken = ['<option value="10">Rubriek 10</option><option value="20">Rubriek 20</option>','<option value="30">Rubriek 30</option><option value="40">Rubriek 40</option>'];

but it'll index from 0.

Taufik Nur Rahmanda Over a year ago

@JilcoTigchelaar but don't worry, even if you define rubrieken as object like your code, you can read it with normal array reading rubrieken[2]; but not rubrieken.2; (as usually object read is using dot e.g. rubrieken.opt2;)

Amit Kumar · Accepted Answer · 2017-10-13 09:16:29Z

1

You can access your corresponding option as key-value pair. like if option 1 is selected then your access it like rubrieken["1"]

Way to access object property.

var rubrieken = {'1': '<option value="10">Rubriek 10</option><option value="20">Rubriek 20</option>','2': '<option value="30">Rubriek 30</option><option value="40">Rubriek 40</option>'};
    $( document ).ready(function() {
        //Bij keuze categorie de rubrieken vullen 
        $("#select1").change(function(){
            //maak de huidige select leeg
            $('#select2').empty();
            var selectedValue = $(this).val();
            if(selectedValue){
                var getOptions = rubrieken[selectedValue];
                $('select#select2').html(getOptions);
            }
        }); 
    });

answered Oct 13, 2017 at 9:16

Amit Kumar

5,96212 gold badges49 silver badges88 bronze badges

1 Comment

Amit Kumar Over a year ago

@JilcoTigchelaar : Glad it help you. Accept it as answer. :)

Collectives™ on Stack Overflow

jquery replace select options with values associative array

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related