There is a select options field that contains languages, where the user can choose multiple language options or just one. When the user selects a language, a new select option should appear for them to choose their proficiency level in that language.
If the user selects multiple languages (e.g. English, Arabic, French), then three select options will appear for each language proficiency level. If the user unselects any of the language options, the corresponding select option for the proficiency level should hide and reset to the default selection.
However, there are some issues with my code:
- When the user selects multiple options, not all select options for proficiency levels appear at once.
- When the user unselects an option, it remains visible and does not reset to the default selection.
Could someone please assist me in resolving these problems?
Below is my view blade with script:
@extends('layouts.app')
@section('content')
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="languages">Languages</label>
<select id="languages" class="form-control" multiple>
<option>Choose Language...</option>
<option value="1">English</option>
<option value="2">Arabic</option>
<option value="3">France</option>
<option value="4">Spanish</option>
</select>
</div>
</div>
<!-- Additional select options for language proficiency levels -->
<div id="arabicShow" style="display: none" class="form-row">
<div class="form-group col-md-6">
<label for="arabic">Arabic level</label>
<select id="arabic" class="form-control">
<option value="" selected>Choose Your level...</option>
<option value="">a</option>
<option value="">b</option>
</select>
</div>
</div>
<div id="englishShow" style="display: none" class="form-row">
<div class="form-group col-md-6">
<label for="english">English level</label>
<select class="form-control">
<option value="">Choose Your level...</option>
<option value="">a</option>
<option value="">b</option>
</select>
</div>
</div>
<div id="franceShow" style="display: none" class="form-row">
<div class="form-group col-md-6">
<label for="france">French level</label>
<select class="form-control">
<option value="">Choose Your level...</option>
<option value="">a</option>
<option value="">b</option>
</select>
</div>
</div>
<button type="submit" class="btn btn-primary">Save</button>
</form>
@stop
@section('script')
<script type="text/javascript">
$(document).ready(function (){
$("#languages option:first-child").attr("disabled","disabled");
$("#arabic option:first-child").attr("disabled","disabled");
$("#english option:first-child").attr("disabled","disabled");
$("#france option:first-child").attr("disabled","disabled");
$('#languages').change(function(){
var text = $(this).find("option:selected").text().trim(); //get text
if(text === "Arabic"){
$('#arabicShow').show();
}else if(text === "English"){
$('#englishShow').show();
}else if(text === "France"){
$('#franceShow').show();
}else {
$('#arabicShow').hide();
$('#englishShow').hide();//hide
}
});
});
</script>
@stop