У меня есть jquery и html код, подобный этому:
$(function () {
//Initialize Select2 Elements
$('.select2').select2()
});
/*Show fill of each option in Choose Transportation*/
$(document).ready(function() {
$('#tpt').change(function() {
var option=$('#tpt').val();
showField(option);
return false;
});
function showField(option) {
var content = '';
if(option == "cr"){
content += '<label>Input car name</label>';
content += '<input type="text" class="form-control"';
content += 'id="crn" name="crname">';
} else if(option == "mc"){
content += '<label>Type Motorcycle</label>';
content += '<select id="tym" class="form-control';
content += ' select2" name="tymotor"';
content += ' style="width: 100%;">';
content += '<option disabled selected>-Choose';
content += ' Type-</option>';
content += '<option value="hnd">Honda</option>';
content += '<option value="ymh">Yamaha</option>';
content += '</select>';
}
$('#contentSelected').html(content);
}
});
/*Show list of Honda motorcylce if value "hnd" was click in Type MotorCycle*/
$(document).ready(function() {
$('#tym').change(function() {
var option2=$('#tym').val();
showFieldmtr(option2);
return false;
});
function showFieldmtr(option2) {
var contentmtr = '';
if(option == "hnd"){
contentmtr += '<label>Type Honda</label>';
contentmtr += '<select id="tyhnd" class="form-control';
contentmtr += ' select2" name="tyhonda"';
contentmtr += ' style="width: 100%;">';
contentmtr += '<option disabled selected>-Choose';
contentmtr += ' Honda Motorcycle-</option>';
contentmtr += '<option value="vr">Vario</option>';
contentmtr += '<option value="bt">Beat</option>';
contentmtr += '</select>';
}
$('#contentSelectedmtr').html(contentmtr);
}
});
/*Show Value Choose MotorCylce*/
$(document).on('change','#tym', function() {
var typemotor = $(this).val();
$(document).find('input[name="trname"]').val(typemotor);
});
$(document).on('input','input[name="crname"]', function() {
var carname = $(this).val();
$(document).find('input[name="trname"]').val(carname);
});
<!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" >
<!-- Select2 -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<!-- JQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="form-group">
<label>Transportatiom</label>
<select id="tpt" class="form-control select2" style="width: 100%;">
<option disabled selected>-Choose Transportation-</option>
<option value="cr">Car</option>
<option value="mc">Motorcycle</option>
</select>
</div>
<div class = "form-group">
<label>Transportation Value</label>
<input type="text" class="form-control" id="tnm" name="trname" readonly>
</div>
<div class="form-group" id="contentSelected">
</div>
<div class="form-group" id="contentSelectedmtr">
</div>
<!-- Latest compiled and minified JavaScript -->
<!-- JQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Select2 Jquery -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
</body>
</html>
Когда jquery обработано html в if (опция == "m c") , функция в -Show Value Choose Motorcycle- была обработана, поскольку функция обнаружила id tym и значение . Но функция в -Показать список Honda motorcylce, если значение "hnd" было нажато в Type MotorCycle- , не может быть обработана. Я не понимаю, где ошибка:
- Строка содержимое в if (опция == "m c") в функции -Показать список Honda motorcylce, если значение "hnd" было нажато в Type MotorCycle- было неправильно? Но я думаю, что если строка неправильная, id tym и значение не могут быть получены и функционировать в -Показать значение Выберите Мотоцикл- не может быть обработано
- Неправильно ли моя jquery функция? Я не знаю об этом, но функция в -Показать значение Выбрать мотоцикл- была обработана и положение этой функции внизу после функции Показать заполнение каждой опции в Выбор транспорта , а функция в -Показать значение Выберите Мотоцикл- была обработана, потому что можно взять id tym и значение . Таким образом, моя jquery позиция функции не была неправильной, я ошибаюсь?
- Была ли функция Показывать заполнение каждой опции в Выбрать транспорт и -Показать список Honda motorcylce, если значение "hnd" было нажатием в Типе MotorCycle - были сбой?
Итак, мои проблемы:
1) Какое решение для показать второй выбор опция когда первый выбор опции в jquery показывается html и мы выбираем опцию в первый выбор опции ?
2) И как можно заставить select2 в id tym работать? Потому что я думаю, что дизайн в опции выбора в id tym - это просто опция выбора. И дизайн не совпадает с опцией выбора в id tpt в html.
Моя программа для этого кода https://jsfiddle.net/yanaditiya/0f9sx4am/