asked on

Modal Dropdown List

I created a four part dropdown list using Modal. The first dropdown list works perfectly, however I'm unable to populate the third and fourth dropdown. Any help is appreciated.

 <div class="form-group">
<label for="agency">1st</label>
<select id="dd1" name="dd1" class="form-control linked- 
dropdown" data-linked="dd2">
<option value="">-- Select DD1 --</option>
<option value="Agency1">DDL_1</option>
<option value="Agency2">DDL_2</option>
</select><p>&nbsp;</p>

<div class="form-group">
<label for="dd2">2nd</label>
<select id="dd2" name="dd2" class="form-control linked-
dropdown" data-linked="dd3">
<option value="">-- Select DD2 --</option> 
</select><p>&nbsp;</p>	
<div class="form-group">
<label for="dd3">3rd</label>
<select id="dd3" name="dd3" class="form-control linked-
dropdown" data-linked="dd4">
<option value="">-- Select DD3 --</option> 
</select><p>&nbsp;</p>	
<div class="form-group">
<label for="dd4">4th</label>
<select id="dd4" name="dd4" class="form-control">
<option value="">-- Select DD4 --</option>
</select><p>&nbsp;</p>	

<button type="button" class="btn btn-very-light-gray" data-dismiss="modal" id="clickButton">Submit</button>
<button data-dismiss="modal" class="btn btn-very-light-gray" id="clickButton2">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<script src="http://code.jquery.com/jquery.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<script>
$('#myModal').on('hidden.bs.modal', function () { 
location.reload();
});

var dataFirstSelect={
option:[ '1stDD1','1stDD2']
}
var dataSecondSelect={
Agency1:['A', 'B'],
Agency2:['E', 'F']
}
var dataThirdSelectf={
Agency1:['C','D'],
Agency2:['G','H']
}
var dataFourthSelectf={
'C':
[{form:'CNN',link:'http://https://www.cnn.com'}],
'D':
[{form:'MSNBC',link:'http://http://www.msnbc.com/'}],
}	


$('#dd1').on('change',function(){
var a=$(this).val();
if(a!==''){ 
for(var i=0;i<dataSecondSelect[a].length;i++){
$('#dd2').append($("<option></option>")
.attr("value",dataSecondSelect[a][i])
.text(dataSecondSelect[a][i])); 
}
}
});
$('#dd2').on('change', function() {
var b = $(this).val();
if (b !== '') {
for (var i = 0; i < dataThirdSelect[b].length; i++) {
$('#dd3').append($("<option></option>")
.attr("value",dataThirdSelect[b][i])
.text(dataThirdSelect[b][i])); 
}
}
});	
$('#dd3').on('change', function() {
var c = $(this).val();
if (c !== '') {
for (var i = 0; i < dataFourthSelect[c].length; i++) {
$('#dd4').append($("<option></option>")
.attr("value",dataFourthSelect[c][i].link)
.text(dataFourthSelect[c][i].form)); 
}
}
});
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.form);
}); 
</script>

Open in new window

ASKER CERTIFIED SOLUTION

Leonidas Dosas

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Keisha Smith

ASKER

Thank you for your feedback. Although your code works in JSFiddle, when I copy & paste the code, the dropdown does not work after the first dropdown is selected. Where am I going wrong?

<div class="form-group">
                                    <label for="agency">1st</label>
					<select id="dd1" name="dd1" class="form-control linked- 
       dropdown" data-linked="dd2">
      <option value="">-- Select DD1 --</option>
      <option value="Agency1">DDL_1</option>
      <option value="Agency2">DDL_2</option>
      </select><p>&nbsp;</p>
									
			<div class="form-group">
									<label for="dd2">2nd</label>
									<select id="dd2" name="dd2" class="form-control linked-
             dropdown" data-linked="dd3">
        <option value="">-- Select DD2 --</option>    
        </select><p>&nbsp;</p>	
 									<div class="form-group">
									<label for="dd3">3rd</label>
									<select id="dd3" name="dd3" class="form-control linked-
             dropdown" data-linked="dd4">
        <option value="">-- Select DD3 --</option>    
        </select><p>&nbsp;</p>	
									<div class="form-group">
   				                    <label for="dd4">4th</label>
									<select id="dd4" name="dd4" class="form-control">
        <option value="">-- Select DD4 --</option>
        </select><p>&nbsp;</p>	

	 <button type="button" class="btn btn-very-light-gray" data-dismiss="modal" id="clickButton">Submit</button>
	 <button data-dismiss="modal" class="btn btn-very-light-gray" id="clickButton2">Cancel</button>
										</div>
										</div>
									</div>
							</div>
$('#myModal').on('hidden.bs.modal', function () { 
    location.reload();
});

var dataFirstSelect={
    option:[ '1stDD1','1stDD2']
};
var dataSecondSelect={
    Agency1:['A', 'B'],
	  Agency2:['E', 'F']
};
var dataThirdSelectf={
    Agency1:['C','D'],
	  Agency2:['G','H']
};
var dataFourthSelectf={
    'C':
	[{form:'CNN',link:'http://https://www.cnn.com'}],
	'D':
	[{form:'MSNBC',link:'http://http://www.msnbc.com/'}]
	};	
$('#dd1').on('change',function(){
  var a=$(this).val();
  $('#dd2>option[value!=""]').remove();
  $('#dd3>option[value!=""]').remove();
  switch(a) {
    case 'Agency1':      
        for(var i=0;i<dataSecondSelect[a].length;i++){
          for(var z=0;z<dataSecondSelect[a][i].length;z++){
          var optionElm=$(' <option value="'+a+'">'+dataSecondSelect[a][i][z]+'</option>');
         $('#dd2').append(optionElm);  
        }
        }
        break;
      case 'Agency2':           
            for(var i=0;i<dataSecondSelect[a].length;i++){
          for(var z=0;z<dataSecondSelect[a][i].length;z++){
          var optionElm=$(' <option value="'+a+'">'+dataSecondSelect[a][i][z]+'</option>');
         $('#dd2').append(optionElm);  
        }
        }
        break;
   
}
});

$('#dd2').on('change',function(){
  var a=$(this).val();
  $('#dd3>option[value!=""]').remove();
  
  switch(a) {
    case 'Agency1':      
        for(var i=0;i<dataThirdSelectf[a].length;i++){
          for(var z=0;z<dataThirdSelectf[a][i].length;z++){
          var optionElm=$(' <option value="'+dataThirdSelectf[a][i][z]+'">'+dataThirdSelectf[a][i] [z]+'</option>');
         $('#dd3').append(optionElm);  
        }
        }
        break;
      case 'Agency2':           
            for(var i=0;i<dataThirdSelectf[a].length;i++){
          for(var z=0;z<dataThirdSelectf[a][i].length;z++){
          var optionElm=$(' <option value="'+dataThirdSelectf[a][i][z]+'">'+dataThirdSelectf[a][i]   [z]+'</option>');
         $('#dd3').append(optionElm);  
        }
        }
        break;   
}
});
$('#clickButton').on('click',function(){
  var data=new Object;
  $('select').each(function(){
      //console.log($(this));
    data[$(this)["0"].id]=$(this).val();  
  });
  
    openDoc(data.form);
});

Open in new window