CODEWITHSUNDEEP
javascriptjqueryhtmlbootstrap-modal
K Smith
K Smith

Reputation: 3

Modal Dropdown List

I have created a four part modal dropdown list using Bootstrap 4.

The first two dropdown list execute without any problems, displaying all available values. However, the last two dropdown lists will not execute the dropdown values.

I've provided sample code below, please review code and provide any assistance. Much appreciated.

<div class="form-group">
<label for="test1">Test1:</label>
<select id="test1" name="test1" class="form-control linked-dropdown" data- 
linked="test2">
  <option value="">-- Select Test1 --</option>
  <option value="Test1">Test1</option>
  <option value="Test2">Test2</option>
  </select><p>&nbsp;</p>

<div class="form-group">
<label for="test2">Test2:</label>
<select id="test2" name="test2" class="form-control linked-dropdown" data-
linked="test3">
<option value="">-- Select Test2 --</option>    
</select><p>&nbsp;</p>

<div class="form-group">
<label for="test3">Test3:</label>
<select id="test3" name="test3" class="form-control linked-dropdown" data-
linked="test3">
<option value="">-- Select Test3 --</option>    
</select><p>&nbsp;</p>  

<div class="form-group">
<label for="test4">Test4</label>
<select id="test4" name="test4" class="form-control">
<option value="">-- Select Test4--</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="clickButton">Cancel</button></div>
</div></div></div></div></div></div>

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

var dataFirstSelect={
option:[ 'Test1','Test2']
}
var dataSecondSelect={
Test1:['A','B'],
Test2:['E','F']
}
var dataThirdSelect={
Test1:['C','D'],
Test2:['G','H']
}
var dataFourthSelect={
'Cā€™:[{form:'CNN',link:'https://www.cnn.com'}],  
'Dā€™:[{form:'MSNBC',link:'http://www.msnbc.com'},]
}

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

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

Upvotes: 0

Views: 874

Answers (1)

TCool
TCool

Reputation: 163

First, here are a few things I recommend you look into:

Using an IDE that will automatically check syntax (or more robust code editor) such as Visual Studio Code or Sublime when working on a project like this.

VSCode: https://code.visualstudio.com/

Sublime: https://www.sublimetext.com/

Using the developer tools console, you'll see errors and other useful information.

Chrome developer tools: https://developer.chrome.com/devtools

Just a few things to keep in mind for later, I see two issues here that need to be addressed.

There is a syntax error when initializing the dataFourthSelect object. It looks like you're using a different style quote to close the keys. Here is the corrected version:

var dataFourthSelect = {
    'C' : [{
        form: 'CNN', 
        link: 'https://www.cnn.com'
    }],
    'D' : [{ 
        form: 'MSNBC', 
        link: 'http://www.msnbc.com'
    }]
}

The other issue is the value assigned to a is not a key of dataThirdSelect:

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

Following the previously constructed options, I think you'll want to change the Test1, and Test2 keys:

var dataThirdSelect = {
    Test1: ['C', 'D'],
    Test2: ['G', 'H']
}

to

var dataThirdSelect = {
    A : ['C', 'D'],
    B : ['G', 'H'],
    E : ['C', 'D'], //Fill these in with the desired values.
    F : ['G', 'H']
}

hopefully, that gets you on the right track. šŸ‘

[Edit] To help answer your comment: Based on your current design I might recommend assigning the selected values to a dictionary on each change event. For example:

var selectedOptions = {};

$('#test2').on('change', function() {
    var a = $(this).val();
    selectedOptions['test2'] = a
    //...
}

Then on submit you can check those values like so:

Object.keys(selectedOptions).forEach((option) => {
    //Do something with each option using selectedOptions[option]
    console.log(selectedOptions[option]);
});

Upvotes: 1

Related Questions