Dynamic Dropdown List using Javascript

Question

I've created a dynamic dropdown list to populate products for there make and model. My script doesn't run to populate the second and third dropdown list. What am I missing in my script below? Any help is appreciated.

var dataFirstSelect = {
  option:['Product1','Product2','Product3']
};

var dataSecondSelect={
  Product1:['Model 1','Model_2','Model_3','Model_4'],
  Product2:['Model 5','Model_6','Model_7','Model_8']
};

var dataThirdSelect={
  Model 1:['Make1-1-1','Make1-1-2','Make1-1-3','Make1-1-4'],
  Model 2:['Make1-2-1','Make1-2-2','Make1-2-3','Make1-2-4'],
  Model_3:['Make1-3-1','Make1-3-2','Make1-3-3','Make1-3-4'],
};
      
$('#company').on('change',function(){
  var a=$(this).val();
  if(a!==''){       
    for(var i=0;i<dataSecondSelect[a].length;i++) {
      $('#make').append($("<option></option>")
        .attr("value",dataSecondSelect[a][i])
        .text(dataSecondSelect[a][i]));   
	   }
  }
});

$('#make').on('change',function(){
  var b=$(this).val();
  if(b!==''){       
    for(var i=0;i<dataThirdSelect[b].length;i++){
      $('#model').append($("<option></option>")
        .attr("value",dataThirdSelect[b][i])
        .text(dataThirdSelect[b][i]));
    }
  }
});

function openDoc(url){
  window.open(url,"_blank","menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes");
}

$('#clickButton').on('click',function(){
  var data=new Object;
  $('select').each(function(){
    //console.log($(this));
    data[$(this)["0"].id]=$(this).val();  
  });
  openDoc(data.model);
});

<select id="company" name="company"  class="form-control linked- 
dropdown" data-linked="make">
  <option value="">-- Select Product --</option>
  <option value="Product1">Product1</option>
  <option value="Product2">Product2</option>

<select id="make" name="make" class="form-control linked-
dropdown" data-linked="model">
  <option value="">Choose Make</option>         

<select id="model" name="model" class="form-control">
  <option value="">Choose Model</option>

downvoted because the errors are easy enough to debug in the console. — doubleOrt
– doubleOrt, Commented Jan 7, 2018 at 2:10
JScript is Microsoft's dialect of the ECMAScript standard[2] that is used in Microsoft's Internet Explorer. en.wikipedia.org/wiki/JScript — connexo
– connexo, Commented Jan 7, 2018 at 2:13

orabis · Accepted Answer · 2018-01-07 02:06:44Z

Below is an updated snippet. Your code had a couple of issues as follows:

1) There was a space in two properties of dataThirdSelect, which are Model 1 and Model 2. You need to enclose them within single or double quotes.

2) Your select elements did not have end tags, which must come after the last option.

var dataFirstSelect = {
  option: ['Product1', 'Product2', 'Product3']
}
var dataSecondSelect = {
  Product1: ['Model 1', 'Model_2', 'Model_3', 'Model_4'],
  Product2: ['Model 5', 'Model_6', 'Model_7', 'Model_8']

}
var dataThirdSelect = {
  'Model 1': ['Make1-1-1', 'Make1-1-2', 'Make1-1-3', 'Make1-1-4'],
  'Model 2': ['Make1-2-1', 'Make1-2-2', 'Make1-2-3', 'Make1-2-4'],
  Model_3: ['Make1-3-1', 'Make1-3-2', 'Make1-3-3', 'Make1-3-4'],
}
$('#company').on('change', function() {
var a = $(this).val();
  if (a !== '') {
    for (var i = 0; i < dataSecondSelect[a].length; i++) {
      $('#make').append($("<option></option>")
        .attr("value", dataSecondSelect[a][i])
        .text(dataSecondSelect[a][i]));
    }
  }
});
$('#make').on('change', function() {
var b = $(this).val();
  if (b !== '') {
    for (var i = 0; i < dataThirdSelect[b].length; i++) {
      $('#model').append($("<option></option>")
        .attr("value", dataThirdSelect[b][i])
        .text(dataThirdSelect[b][i]));
    }
  }
});

function openDoc(url) {
  window.open(url, "_blank", "menubar=yes,location=yes,resizable=yes,scrollbars= yes, status = yes ");
}
$('#clickButton').on('click', function() {
  var data = new Object;
  $('select').each(function() {
    //console.log($(this));
    data[$(this)["0"].id] = $(this).val();
  });
  openDoc(data.model);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="company" name="company" class="form-control linked- 
       dropdown" data-linked="make">
      <option value="">-- Select Product --</option>
      <option value="Product1">Product1</option>
      <option value="Product2">Product2</option>
      </select>

<select id="make" name="make" class="form-control linked-
             dropdown" data-linked="model">
        <option value="">Choose Make</option>    
        </select>

<select id="model" name="model" class="form-control">
        <option value="">Choose Model</option>
        </select>

Collectives™ on Stack Overflow

Dynamic Dropdown List using Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related