Модальный выпадающий список - PullRequest
Новая
       7

Модальный выпадающий список

0 голосов
/ 03 мая 2018

Я создал выпадающий список из четырех частей, используя Bootstrap 4.

Первые два выпадающих списка выполняются без проблем, отображая все доступные значения. Однако последние два раскрывающихся списка не будут выполнять раскрывающиеся значения.

Я предоставил пример кода ниже, пожалуйста, просмотрите код и предоставьте любую помощь. Очень ценится. 

<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>

1 Ответ

0 голосов
/ 08 мая 2018

Во-первых, вот несколько вещей, которые я рекомендую вам изучить:

Использование IDE, которая будет автоматически проверять синтаксис (или более надежный редактор кода), такой как код Visual Studio или Sublime, при работе над таким проектом.

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

Возвышенное: https://www.sublimetext.com/

Используя консоль инструментов разработчика, вы увидите ошибки и другую полезную информацию.

Инструменты разработчика Chrome: https://developer.chrome.com/devtools

Лишь несколько вещей, о которых следует помнить на потом, я вижу здесь две проблемы, которые необходимо решить.

При инициализации объекта dataFourthSelect произошла синтаксическая ошибка. Похоже, вы используете другую цитату стиля, чтобы закрыть ключи. Вот исправленная версия: 

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

Другая проблема - это значение, присвоенное a, а не ключ 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]));
        }
    }
});

Следуя ранее сконструированным параметрам, я думаю, вы захотите изменить клавиши Test1 и Test2: 

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

до 

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

Надеюсь, это приведет вас на правильный путь. ?

[Изменить] Чтобы помочь ответить на ваш комментарий: Исходя из вашего текущего дизайна, я мог бы рекомендовать назначать выбранные значения словарю для каждого события изменения. Например: 

var selectedOptions = {};

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

Затем при отправке вы можете проверить эти значения следующим образом: 

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