jquery show/hide div after already showing a div from a dropdown

jquery show/hide div after already showing a div from a dropdown - javascript

So i using a modal, than when loaded, the first select option shows two divs. I got that to function properly, but now i want it to show specific divs based on the third dropdown. Basically, they are choosing one of two options from the top. depending on what those are it displays two more drop downs. they choose the second one, and than depending on what they do for the third dropdown, it will display the next bit of divs. But no matter where or how i place to pull the value and declare it, its not responding, nor showing the next set of divs. Heres the code :
<div id="myModal" class="modal" role="dialog">
<div class="modal-dialog">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-body">
<center>Owner Controls</strong>
<hr>
<?php echo form_open(base_url('admin/work/owner_control'), 'class="form-container"'); ?>
<div class="form-group">
<label for="chng_fun">Mine or Refinery:</label>
<select id="chng_fun" name="chng_fun" class="browser-default custom-select custom-select-lg mb-3">
<option value="" selected>Please select</option>
<option value="mine">Mines</option>
<option value="refinery">Refineries</option>
</select>
<span id="chng_funx" class="errx"></span>
</div>
<div class="form-group" id="minesli" style="display:none">
<label for="mineslist">Select Mine:</label>
<select id="mineslist" name="mineslist" class="browser-default custom-select custom-select-lg mb-3">
<option value="" selected>Please select </option>
<?php foreach($mineat as $minev){ ?>
<option value="<?php echo $minev['mi_id'];?>"><?php echo $minev['mname'];?></option>
<?php } ?>
</select>
<span id="mineslistx" class="errx"></span>
</div>
<div class="form-group" id="refineli" style="display:none">
<label for="refinelist">Select Refinery:</label>
<select id="refinelist" name="mineslist" class="browser-default custom-select custom-select-lg mb-3">
<option value="" selected>Please select </option>
<?php foreach($refneat as $refv){ ?>
<option value="<?php echo $refv['ref_id'];?>"><?php echo $refv['rename'];?></option>
<?php } ?>
</select>
<span id="refinelistx" class="errx"></span>
</div>
<div class="form-group" id="moption" style="display:none">
<label for="moptionsl">Pick Mine Option:</label>
<select id="moptionsl" name="moptionsl" class="browser-default custom-select custom-select-lg mb-3">
<option value="" selected>Please select </option>
<option value="upgrade">Upgrade</option>
<option value="sell" disabled>Sell</option>
<option value="taxes">Taxes</option>
<option value="destroy">Destroy</option>
</select>
<span id="moptionslx" class="errx"></span>
</div>
<div class="form-group" id="roption" style="display:none">
<label for="roptionsl">Pick Refinery Option:</label>
<select id="roptionsl" name="roptionsl" class="browser-default custom-select custom-select-lg mb-3">
<option value="" selected>Please select </option>
<option value="upgrade">Upgrade</option>
<option value="sell" disabled>Sell</option>
<option value="taxes">Taxes</option>
<option value="destroy">Destroy</option>
</select>
<span id="roptionslx" class="errx"></span>
</div>
<div class="form-group" id="minupgrade" style="display:none">
<center> FREAKING WORK!</center>
<span id="muppgradex" class="errx"></span>
</div>
<div class="form-group" id="refupgrade" style="display:none">
ROCK ON
<span id="ruppgradex" class="errx"></span>
</div>
<?php echo form_close(); ?>
</div>
</div>
</div>
</div>
So basically what im trying to pull is the value from moptions1 and roptions1, declare them, and than display minupgrade div if moptions1 is upgrade, and refupgrade div if roptions1 is upgrade. Heres the Javascript:
<script>
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<script>
$(document).ready(function(){
$("#chng_fun").change(function(){
var action = $("#chng_fun").val();
if(action == "mine"){
$('#minesli').show('slow');
$('#moption').show('slow');
}else{
$('#minesli').hide('slow');
$('#moption').hide('slow');
}
var choice = $('#moptions1').val();
if(choice == "upgrade"){
$('#minupgrade').show('slow');
}else{
$('#minupgrade').hide('slow');
}
if(action == "refinery"){
$('#refineli').show('slow');
$('#roption').show('slow');
}else{
$('#refineli').hide('slow');
$('#roption').hide('slow');
}
var choice2 = $('#roptions1').val();
if(choice2 == "upgrade"){
$('#refupgrade').show('slow');
}else{
$('#refupgrade').hide('slow');
}
});
});
</script>
I have tried moving variables around, i also tried using a if (action == "mine" && choice == "upgrade") in both itself and inside the action == "mine" as an if else. Ive trie dmoving the var and portion of the code to various places to see if it responds better, but no matter what ive tried its not capturing the value and displaying the divs.

Related

How to show multiple select options when user select multiple options and when unselect it still hide and reset!!!?? jquery

I have select options contains languages, it's supposedly that user choose multiple options (languages) or an option (language), and i want user when choose an option (language), new select option shows, and contains his level in that language.
when user select multiple languages (english, arabic, france), three select option show, his level in these language, and when unselect any options, it's supposed to, the select option (that contains his level in that language) become hidden and reset (return to default select (first option)).
but i've some problems in my code
1- when user select multiple options, multiple select options that contains his level don't show all at once.
2- when user unselect an option it stills show and not reset (return to default select (first option))?!!
could you help me please
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">Espanole</option>
</select>
</div>
</div>
<div id="arabicShow" style="display: none" class="form-row">
<div id="" 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">France 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

You can use .each loop to iterate through all selected options and then depending on condition show require select-boxes.
Demo Code :
$(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");
$('.selects').hide(); //hide all
$('#languages').change(function() {
$('.selects select:not(:visible)').val(""); //reset
$('.selects').hide(); //hide all
//loop through all selected options..
$(this).find("option:selected").each(function() {
var text = $(this).text()
if (text === "Arabic") {
$('#arabicShow').show();
} else if (text === "English") {
$('#englishShow').show();
} else if (text === "France") {
$('#franceShow').show();
}
})
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<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>
</select>
</div>
</div>
<!--added one common class i.e : selects-->
<div id="arabicShow" class="form-row selects">
<div id="" 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" class="form-row selects">
<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" class="form-row selects">
<div class="form-group col-md-6">
<label for="france">France 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>

Display value from selected option on every click

I have a dropdown menu where list is selected from mysql database and a textbox contain datepicker. How can i display value selected from the dropdown menu and datepicker on every click on add button? The code can add div dynamically onclick on add button but the value selected to be displayed in the div are changed on every selected dropdown menu because of the javascript onchange function.
How can i display the value correctly?
$( ".js-datepicker" ).datepicker();
$("#choose_exam").on("change", function() {
var selected = $(this).val();
$("#exam").html("" + selected);
});
$("#t_exam").on("change", function() {
var selected = $(this).val();
$("#exam_date").html("" + selected);
})
//contents of the div added after clicking on add button in the form
$(".add-more").click(function() {
var html = $("#copy-fields").html();
$("#validation-step2").append(html);
$('.js-datepicker').datepicker('update');
});
//remove button
$("body").on("click", ".remove", function() {
$(this).parents(".control-group").remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!-- This is the form contain dropdown menu and datepicker textbox -->
<div class="tab-pane push-30-t push-50" id="validation-step2">
<div class="form-group">
<select class="form-control" name="choose_exam[]" id="choose_exam">
<!--<?php
$sql = "Select name from exam_list order by id asc";
$result = mysql_query( $sql );
while(list($category) = mysql_fetch_row($result)){
$option = '<option value="'.$category.'">'.$category.'</option>';
echo ($option);}
?>-->
<option value="0">Please choose</option>
<option value="1">Sample Category 1</option>
<option value="2">Sample Category 2</option>
<option value="3">Sample Category 3</option>
<option value="4">Sample Category 4</option>
<option value="5">Sample Category 5</option>
</select>
<label for="choose_exam">Exam List</label>
</div>
<div class="form-group">
<input class="js-datepicker form-control" type="text" name="t_exam" id="t_exam" data-date-format="dd/mm/yyyy">
<label for="t_exam">Date</label>
</div>
<div class="form-group">
<button class="btn btn-default add-more pull-right" type="button">Add</button>
</div>
<!-- This is for dynamically add every div contains exam and date value upon clicking add button -->
<div class="copy-fields hide" id="copy-fields">
<div class="control-group">
<div class="form-group">
<div id="exam" name="exam[]"></div>
<div id="exam_date" name="exam_date[]"></div>
</div>
<div class="form-group">
<button class="btn btn-default remove pull-right" type="button">Delete</button>
</div>
</div>
</div>

Your code has several problems:
The HTML you're copying using var html = $("#copy-fields").html(); contains elements with the id attribute specified, which will lead you to having a bunch of elements with the same id. Turn #exam to .exam and #exam_date to .exam_date to fix that.
Then, inside the change event, use first() or last(), so that only the first or the last of .exam and .exam_date change when the event is triggered. In the first snippet, I use last() as in $(".exam").last().html(this.value);.
The line $(".js-datepicker").datepicker("update"); throws an error, perhaps because you haven't set which date to update to. In the snippets below, I assume you want to reset it.
Snippet 1:
(This snippet follows your code as much as possible including a live update of the data 'onchange'.)
/* ----- JavaScript ----- */
/* Initialise the datepicker. */
$(".js-datepicker").datepicker();
/* Set the 'change' event. */
$("#choose_exam").on("change", function() {
$(".exam").last().html(this.value);
});
$("#t_exam").on("change", function() {
$(".exam_date").last().html(this.value);
})
/* Insert the given data to the DOM. */
$(".add-more").click(function() {
/* Cache the innerHTML of the '#copy-fields'. */
var html = $("#copy-fields").html();
/* Insert it as last inside '#validation-step2'. */
$("#validation-step2").append(html);
/* Reset the 'select' element and the date picker. */
$("#choose_exam").val(0);
$(".js-datepicker").val("");
});
/* Remove the saved data when the remove button is clicked. */
$("body").on("click", ".remove", function() {
$(this).parents(".control-group").remove();
});
<!----- HTML ----->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="tab-pane push-30-t push-50" id="validation-step2">
<div class="form-group">
<select class="form-control" name="choose_exam[]" id="choose_exam">
<option value="0">Please choose</option>
<option value="1">Sample Category 1</option>
<option value="2">Sample Category 2</option>
<option value="3">Sample Category 3</option>
<option value="4">Sample Category 4</option>
<option value="5">Sample Category 5</option>
</select>
<label for="choose_exam">Exam List</label>
</div>
<div class="form-group">
<input class="js-datepicker form-control" type="text" name="t_exam"
id="t_exam" data-date-format="dd/mm/yyyy">
<label for="t_exam">Date</label>
</div>
<div class="form-group">
<button class="btn btn-default add-more pull-right" type="button">Add</button>
</div>
<!-- This is for dynamically add every div contains exam and date
value upon clicking add button -->
<div class="copy-fields hide" id="copy-fields">
<div class="control-group">
<div class="form-group">
<div class="exam" name="exam[]"></div>
<div class="exam_date" name="exam_date[]"></div>
</div>
<div class="form-group">
<button class="btn btn-default remove pull-right" type="button">Delete</button>
</div>
</div>
</div>
</div>
Snippet 2:
(This snippet presents an alternate approach using a template to add the data to the DOM.)
/* ----- JavaScript ----- */
/* Create a template. */
var template = `
<div class="control-group">
<div class="form-group">
<div class="exam" name="exam[]">[_EXAM_]</div>
<div class="exam_date" name="exam_date[]">[_DATE_]</div>
</div>
<div class="form-group">
<button class="btn btn-default remove pull-right" type="button">Delete</button>
</div>
</div>
`;
/* Initialise the datepicker. */
$(".js-datepicker").datepicker();
/* Insert the given data to the DOM. */
$(".add-more").click(function() {
/* Cache the data. */
var
exam = $("#choose_exam").val(),
date = $("#t_exam").val(),
editedTemplate = template.replace("[_EXAM_]", exam).replace("[_DATE_]", date);
/* Insert it as last inside '#validation-step2'. */
$("#validation-step2").append(editedTemplate);
/* Reset the 'select' element and the date picker. */
$("#choose_exam").val(0);
$(".js-datepicker").val("");
});
/* Remove the saved data when the remove button is clicked. */
$("body").on("click", ".remove", function() {
$(this).parents(".control-group").remove();
});
<!----- HTML ----->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="tab-pane push-30-t push-50" id="validation-step2">
<div class="form-group">
<select class="form-control" name="choose_exam[]" id="choose_exam">
<option value="0">Please choose</option>
<option value="1">Sample Category 1</option>
<option value="2">Sample Category 2</option>
<option value="3">Sample Category 3</option>
<option value="4">Sample Category 4</option>
<option value="5">Sample Category 5</option>
</select>
<label for="choose_exam">Exam List</label>
</div>
<div class="form-group">
<input class="js-datepicker form-control" type="text" name="t_exam"
id="t_exam" data-date-format="dd/mm/yyyy">
<label for="t_exam">Date</label>
</div>
<div class="form-group">
<button class="btn btn-default add-more pull-right" type="button">Add</button>
</div>
</div>

So i prefer to discuss about your question under this answer, because i still feel something is wrong, it's not clear to me what you want to do exactly, but here is you can get #t_exam and #choose_exam value after click on add button. Also it dynamically add selected values to your html but with a little changes.
$(".js-datepicker").datepicker();
$(".add-more").click(function() {
var selectedExam = $('#choose_exam option:selected').val();
var selectedDate = $('#t_exam').val();
var html = '<div class="control-group">'+
'<div class="form-group">'+
'<div class="exam" name="exam[]">'+selectedExam+'</div>'+
'<div class="exam_date" name="exam_date[]">'+selectedDate+'</div></div>'+
'<div class="form-group">'+
'<button class="btn btn-default remove pull-right" type="button">Delete</button>'+
'</div></div>'
;
$("#copy-fields").append(html);
// $('.js-datepicker').datepicker('update');
});
//remove button
$("body").on("click", ".remove", function() {
$(this).parents(".control-group").remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!-- This is the form contain dropdown menu and datepicker textbox -->
<div class="tab-pane push-30-t push-50" id="validation-step2">
<div class="form-group">
<select class="form-control" name="choose_exam[]" id="choose_exam">
<!--<?php
$sql = "Select name from exam_list order by id asc";
$result = mysql_query( $sql );
while(list($category) = mysql_fetch_row($result)){
$option = '<option value="'.$category.'">'.$category.'</option>';
echo ($option);}
?>-->
<option value="0">Please choose</option>
<option value="1">Sample Category 1</option>
<option value="2">Sample Category 2</option>
<option value="3">Sample Category 3</option>
<option value="4">Sample Category 4</option>
<option value="5">Sample Category 5</option>
</select>
<label for="choose_exam">Exam List</label>
</div>
<div class="form-group">
<input class="js-datepicker form-control" type="text" name="t_exam" id="t_exam" data-date-format="dd/mm/yyyy">
<label for="t_exam">Date</label>
</div>
<div class="form-group">
<button class="btn btn-default add-more pull-right" type="button">Add</button>
</div>
<!-- This is for dynamically add every div contains exam and date value upon clicking add button -->
<div class="copy-fields hide" id="copy-fields"></div>

How do I get the checkbox state toggle between the two select boxes?

I have two select boxes which loads contacts and groups of contacts, how do I show one div at a time, switching between them by checking or unchecking the checkbox?
The code below show one at off state and show both two when checked instead of hiding the first one and showing the second one.
code snippet
$(document).ready(function () {
var checkbox = $('#checker');
var dependent = $('#dependent-box');
var dependent2 = $('#dependent-box2');
if (checkbox.attr('checked') !== undefined){
dependent.show();
dependent2.hide();
} else {
dependent2.show();
dependent.hide();
}
checkbox.change(function(e){
dependent.toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" id="checker" data-toggle="toggle">
<div id="dependent-box">
<div class="form-group" >
<select class="contact-multiple form-control" multiple="multiple" name="to_sms[]" id="toggle1" style="width: 98%;">
<option value="Hi">
Hi
</option>
</select>
</div>
</div>
<div id="dependent-box2">
<div class="form-group" >
<select class="contact-multiple form-control" multiple="multiple" name="to_sms[]" id="toggle1" style="width: 98%;">
<option value="Hi">
Hello
</option>
</select>
</div>
</div>

You are not toggling the second box in your change function.
checkbox.change(function(e){
dependent.toggle();
dependent2.toggle();
});

check if the checker is checked :
$(document).ready(function () {
var checkbox = $('#checker');
var dependent = $('#dependent-box');
var dependent2 = $('#dependent-box2');
dependent2.hide();
checkbox.change(function(e){
if(this.checked){
dependent.hide();
dependent2.show();
}else
{
dependent.show();
dependent2.hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" id="checker" data-toggle="toggle">
<div id="dependent-box">
<div class="form-group" >
<select class="contact-multiple form-control" multiple="multiple" name="to_sms[]" id="toggle1" style="width: 98%;">
<option value="Hi">
Hi
</option>
</select>
</div>
</div>
<div id="dependent-box2">
<div class="form-group" >
<select class="contact-multiple form-control" multiple="multiple" name="to_sms[]" id="toggle1" style="width: 98%;">
<option value="Hi">
Hello
</option>
</select>
</div>
</div>

multiselect not working while passing to html using javascript(inner html)

html tag where i am calling showDiv() function
<div class="col-xs-12 margin-y">
<div class="width">
<label class="col-xs-4 col-md-2">Select your preference<span>*</span></label>
<div class="col-xs-6 col-md-10">
<div class="col-xs-6">
<select class="form-control" id="req_prp_type" name="req_prp_type" onchange="return showDiv();" required>
<option value="">Please Select</option>
<?php echo $this->home_model->get_dropdown('prp_type')?>
</select>
</div>
<div class="col-xs-6">
<select class="form-control" id="req_prp_mode" name="req_prp_mode" onchange="return showDiv();" required>
<option value="">Please Select</option>
<?php echo $this->home_model->get_dropdown('prp_mode')?>
</select>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function showDiv($value) {
var req_prp_type = $('#req_prp_type').val();
var req_prp_mode = $('#req_prp_mode').val();
if (req_prp_type != '' && req_prp_mode != '') {
if ((req_prp_type == 1 && req_prp_mode == 1) || (req_prp_type == 1 && req_prp_mode == 2)) {
$("#data").html('<div class="col-xs-12 margin-y"><div class="width"><div class="col-xs-12"><div class="col-xs-12 col-md-6 margin-y"><div class="width"> <div class="col-xs-12 col-md-10"><div class="col-xs-12 margin-y"><label class="col-xs-12 col-md-6">Commercial Type</label><select class="form-control ddlCars col-xs-6" multiple="multiple"><?php echo $this->home_model->get_dropdown('
commercial_type ')?></select></div></div></div></div></div></div></div><div class="col-xs-12 margin-y"><label class="col-xs-12 col-md-6">Condition</label><select class="form-control ddlCars col-xs-6" multiple="multiple">><?php echo $this->home_model->get_dropdown('
pri_condition ')?> </select></div>');
}
}
}
this function is bootstrap multiple select js
$(document).ready(function() {
$('.ddlCars').multiselect();
$('.ddlCars1').multiselect({
numberDisplayed: 1,
});
$('.ddlCars').multiselect({
includeSelectAllOption: true,
enableFiltering: true
});
$('.ddlCars').multiselect({
nonSelectedText: 'Select'
});
});
$('.amItem').on('click', function() {
$(this).toggleClass('inactive');
});
i have used those .css and .js
assets/css/bootstrap-multiselect.css" rel="stylesheet">
assets/js/bootstrap-multiselect.js">

I had multiple jquery.js called in my view. I have deleted multiple and have kept one. I have called my show_div function and my multiselect function in a single tag script tag.

Check out this fiddle perfect work on this
https://jsfiddle.net/jdndnd9k/
// HTML Part
<a id="show" href=Javascript:void(0);>Show</a>
<div id="div_show" style="display:none;">
<select id="data" multiple="multiple">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
</select>
</div>
// JS Part
$("#show").click(function(){
$("#div_show").show();
});
$(document).ready(function() {
$('#data').multiselect();
});
if now any problem then check your console and solve error.

Show div on chosen select items

I have this dropdown
<div class="box-body">
<div class="form-group">
<label class="col-sm-2 control-label col-sm-offset-2" for="LEVEL"><span>*</span>Level:</label>
<div class="col-sm-5">
<select class="form-control" name = "LEVEL" id = "LEVEL">
<option value = "<?= set_value("LEVEL"); ?>"><?= set_value("LEVEL"); ?></option>
<option value="Elementary" > Elementary </option>
<option value="Secondary" > Secondary </option>
<option value="College" > College </option>
<option value="Vocational" > Vocational </option>
<option value="Trade School" > Trade School </option>
<option value="GraduateStudies" > GraduateStudies </option>
</select>
</div>
</div>
</div>
and when I select something, except for elementary and secondary, I want to show this div
<div class="box-body" style="display:none" id = "COURSE">
<div class="form-group">
<label for="COURSE" class="col-sm-2 control-label col-sm-offset-2"><span>*</span>Degree/Course:<br>(Write in full)</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="COURSE" name="COURSE"value = "<?= set_value("COURSE"); ?>">
</div>
</div>
</div>
my javascript is,
$(function() {
$('#LEVEL').change(function(){
$('.COURSE').hide();
if($('#LEVEL').val() == 'Elementary' || 'Secondary'){
$('.COURSE').hide();
}else{
$('#COURSE').show();
}
});
});
the problem is, it is hidden, whatever value I select

Firstly, the COURSE has an id, so your selector is incorrect.
To solve your problem, the if statement must include the full condition in both logical parts, like this:
$('#LEVEL').change(function(){
$('#COURSE').hide();
if($('#LEVEL').val() == 'Elementary' || $('#LEVEL').val() == 'Secondary'){
$('#COURSE').hide();
} else {
$('#COURSE').show();
}
});
Note that you can shorten this by using toggle() with a boolean, and also by using the this keyword to save on DOM accesses:
$('#LEVEL').change(function() {
$('#COURSE').toggle($(this).val() != 'Elementary' && $(this).val() != 'Secondary');
});
Working example

You should use this if statement
$(function() {
$('#LEVEL').change(function(){
$('.COURSE').hide();
if( ($('#LEVEL').val() == 'Elementary') || ($('#LEVEL').val() == 'Secondary')) {
$('.COURSE').hide();
}else{
$('#COURSE').show();
}
}); // change close
}); // function close

You have to change the if condition as if ($('#LEVEL').val() == 'Elementary' || $('#LEVEL').val() == 'Secondary').
Also change $('.COURSE').hide(); to $('#COURSE').hide();.
Note: Id's should be unique. In your code both div and input has same id COURSE
$(function() {
$('#LEVEL').change(function() {
if ($('#LEVEL').val() == 'Elementary' || $('#LEVEL').val() == 'Secondary') {
$('#COURSE').hide();
} else {
$('#COURSE').show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box-body">
<div class="form-group">
<label class="col-sm-2 control-label col-sm-offset-2" for="LEVEL"><span>*</span>Level:</label>
<div class="col-sm-5">
<select class="form-control" name="LEVEL" id="LEVEL">
<option value="<?= set_value(" LEVEL "); ?>">
<?= set_value( "LEVEL"); ?>
</option>
<option value="Elementary">Elementary</option>
<option value="Secondary">Secondary</option>
<option value="College">College</option>
<option value="Vocational">Vocational</option>
<option value="Trade School">Trade School</option>
<option value="GraduateStudies">GraduateStudies</option>
</select>
</div>
</div>
</div>
<div class="box-body" style="display:none" id="COURSE">
<div class="form-group">
<label for="COURSE" class="col-sm-2 control-label col-sm-offset-2"><span>*</span>Degree/Course:
<br>(Write in full)</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="COURSE" name="COURSE" value="<?= set_value(" COURSE "); ?>">
</div>
</div>
</div>

Develop Reference

JavaScript is the programming language of the Web.

jquery show/hide div after already showing a div from a dropdown - javascript

Related

How to show multiple select options when user select multiple options and when unselect it still hide and reset!!!?? jquery

Display value from selected option on every click

How do I get the checkbox state toggle between the two select boxes?

multiselect not working while passing to html using javascript(inner html)

Show div on chosen select items

Categories

Resources