CODEWITHSUNDEEP
javascripthtml
Newbie
Newbie

Reputation: 11

Dynamic Dropdown List using Javascript

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>

Upvotes: 0

Views: 85

Answers (1)

orabis
orabis

Reputation: 2809

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>

Upvotes: 1

Related Questions