I have jquery and html code like this :
$(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>
When jquery processed html in if (option == "mc"), the function in -Show Value Choose Motorcycle- was processed because the function detected id tym and the value. But the function in -Show list of Honda motorcylce if value "hnd" was click in Type MotorCycle- can not processed. I don't understand where is the fault:
- Is string content in if (option == "mc") on function -Show list of Honda motorcylce if value "hnd" was click in Type MotorCycle- was wrong ? But i think if the string is wrong, id tym and the value can't be taken and function in -Show Value Choose Motorcycle- can't be processed
- Is my jquery function position was wrong ? I don't know about it, but the function in -Show Value Choose Motorcycle- was processed and the position of that function in the bottom after function Show fill of each option in Choose Transportation, and the function in -Show Value Choose Motorcycle- was processed because id tym and value can be taken. So my jquery function position wasn't wrong, am I wrong ?
- Were the function Show fill of each option in Choose Transportation and -Show list of Honda motorcylce if value "hnd" was click in Type MotorCycle- were crashed ?
So, My problems are:
1) What is the solution to show second select option when first select option in jquery is show to html and we choose the option in first select option ?
2) And what is the solution to make select2 in id tym work ? Because i think the design in select option in id tym is just a simple select option. And the design is not same with select option in id tpt in html.
My program for that code is https://jsfiddle.net/yanaditiya/0f9sx4am/
