Develop Reference

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>

Editing a records not hiding the div using jquery

while adding a record if i select the one of the value from dropdown then some of the divs are hiding and while insertion the data is inserting successfully into database.
Here the problem is while editing the same record which i have inserted by default it is showing the fields which i have added.
For Example: when user selects open plots from dropdown then i am hiding these two divs total_bathrooms and car_parking but when i edit if the dropdown value is open plots it should not display these two divs total_bathrooms and car_parking but here it is displaying.
Inserting A Record:
<select class="custom-select-box" name="property_type" id="property_type"required>
<option>Property Type</option>
<option value="1-BHK">1 BHK</option>
<option value="2-BHK">2 BHK</option>
<option value="3-BHK">3 BHK</option>
<option value="Villas-Duplex">Villas-Duplex</option>
<option value="Houses">Houses</option>
<option value="Open-Plots">Open Lands</option>
</select>
<div class="form-group col-md-4 col-sm-6 col-xs-12" id="total_bathrooms">
<div class="field-label">Total Bathrooms</div>
<input type="text" name="total_bathrooms" id="total_bathrooms" placeholder="Total Bathrooms" maxnumber="1"><span id="errmsgs"></span>
</div>
<div class="form-group col-md-4 col-sm-6 col-xs-12" id="car_parking">
<div class="field-label">Car Parking</div>
<label class="radio-inline">
<input type="radio" name="car_parking" value="Available">Available
</label>
<label class="radio-inline">
<input type="radio" name="car_parking" value="Unavailable" >Unavailable
</label>
</div>
jquery:
$(document).ready(function(){
$('#property_type').on('change', function() {
if ( this.value == 'Open-Plots')
{
$("#total_bathrooms").hide();
$("#car_parking").hide();
}
else
{
$("#total_bathrooms").show();
$("#car_parking").show();
}
});
});
Editing a Record:
<select class="custom-select-box" name="property_type" required="" id="property_type">
<option value="1-BHK">1 BHK</option>
<option value="2-BHK">2 BHK</option>
<option value="3-BHK">3 BHK</option>
<option value="Villas-Duplex">Villas-Duplex</option>
<option value="Houses">Houses</option>
<option value="Open-Plots" selected="selected">Open Lands</option>
</select>
<div class="form-group col-md-4 col-sm-6 col-xs-12" id="total_bathrooms">
<div class="field-label">Total Bathrooms</div>
<input type="text" name="total_bathrooms" id="total_bathrooms" value="" maxnumber="1" required=""><span id="errmsgss"></span>
</div>
<div class="form-group col-md-4 col-sm-6 col-xs-12" id="car_parking">
<div class="field-label">Car Parking</div>
<input type="radio" name="car_parking" value="Available">Available
<input type="radio" name="car_parking" value="Unavailable">Unavailable
</div>
jquery is same for both adding and editing

Do your check on when the page loads as well. Your current code only checks when the select list is changed.
$(document).ready(function(){
showHide();
$('#property_type').on('change', function() {
showHide();
});
function showHide(){
if ( $("#property_type").val() == 'Open-Plots')
{
$("#total_bathrooms").hide();
$("#car_parking").hide();
}
else
{
$("#total_bathrooms").show();
$("#car_parking").show();
}
}
});

On change of a selected value show an input

I am trying to choose yes value in this dropdown, so I can show another input field to add discount.
I am trying but nothing is showing. Can you please help me?
<div class="form-group m-form__group row">
<select class="form-control m-input" name="is_offer" id="is_offer" onclick="myFunction()" required>
<option value="" disabled selected >--Choose--</option>
<option value="yes" >Yes</option>
<option value="no">No</option>
</select>
</div>
<div id="offer"></div>
<script>
function myFunction() {
if (document.getElementById('is_offer').value = 'yes') {
document.getElementById('offer').innerText = '<div class="form-group m-form__group row"> <label class="col-xl-3 col-lg-3 col-form-label">* Discount::</label> <div class="col-xl-9 col-lg-9"> <div id="asd"></div> </div> </div>';
}
}
</script>
function myFunction() {
if (document.getElementById('is_offer').value = 'yes') {
document.getElementById('offer').innerText = '<div class="form-group m-form__group row"> <label class="col-xl-3 col-lg-3 col-form-label">* Discount::</label> <div class="col-xl-9 col-lg-9"> <div id="asd"></div> </div> </div>';
}
}
<div class="form-group m-form__group row">
<select class="form-control m-input" name="is_offer" id="is_offer" onclick="myFunction()" required>
<option value="" disabled selected>--Choose--</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div id="offer"></div>

Your condition statement has issues. Use document.getElementById('is_offer').value === 'yes' (triple-equals)

function myFunction()
{
if (document.getElementById('is_offer').value === 'yes')
{
document.getElementById('offer').innerHTML = '<div class="form-group m-form__group row"> <label class="col-xl-3 col-lg-3 col-form-label">* Discount::</label> <div class="col-xl-9 col-lg-9"> <div id="asd"></div></div></div>';
}
}
and change onclick with onChange.

Use .innerHTML to set the div not innerText. innerText assumes all your html data is text and adds it like a text. ,For the yes condition, = is used for assignment but we have to compare so == is used. And call the function on onchange event not on click of the select tag
function myFunction()
{
if( document.getElementById('is_offer').value=='yes')
{
document.getElementById('offer').innerHTML='<div class="form-group m-form__group row"> <label class="col-xl-3 col-lg-3 col-form-label">* Discount::</label> <div class="col-xl-9 col-lg-9"> <div id="asd"></div> </div> </div>';
}
else
document.getElementById('offer').innerHTML=''
}
<div class="form-group m-form__group row">
<select class="form-control m-input" name="is_offer" id="is_offer" onChange="myFunction()" required>
<option value="" disabled selected >--Choose--</option>
<option value="yes" >Yes</option>
<option value="no">No</option>
</select>
</div>
<div id="offer"></div>

You had 3 issues should be changed.
If you want to listen the change of input, you shoule use onchange instead of onclick.
In if condition you use assigning variables instead of comparison (use == or ===).
It seems you would like to change HTML content. So you should use innerHTML instead of innerText.
After fixing all of them we have code like this:
<div class="form-group m-form__group row">
<select class="form-control m-input" name="is_offer" id="is_offer" onchange="myFunction()" required>
<option value="" disabled selected>--Choose--</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div id="offer"></div>
<script>
function myFunction() {
if (document.getElementById('is_offer').value === 'yes') {
document.getElementById('offer').innerHTML = '<div class="form-group m-form__group row"> <label class="col-xl-3 col-lg-3 col-form-label">* Discount::</label> <div class="col-xl-9 col-lg-9"> <div id="asd"></div> </div> </div>';
}
}
</script>

Prefer to use the onchange event on the select tag. Also, you should use === to compare the value with yes or no, not just = whish is an assignment.
By using a template and cloning it, you don't have to mix your JavaScript with HTML code, you just have to fetch the template, clone it and append it to your div.
Do not query the document to find your select in your handler, you have access to it via the event.target object, which you get access to as argument to your handler.
Also, don't forget to erase the discount when you select no.
function onSelect(event) {
const offer = document.getElementById('offer');
offer.innerHTML = '';
if (event.target.value === 'yes') {
const tpl = document.getElementById('discount-tpl');
const clone = document.importNode(tpl.content, true);
offer.appendChild(clone);
}
}
<div class="form-group m-form__group row">
<select class="form-control m-input" name="is_offer" id="is_offer" onchange="onSelect(event)" required>
<option value="" disabled selected >--Choose--</option>
<option value="yes" >Yes</option>
<option value="no">No</option>
</select>
</div>
<div id="offer"></div>
<template id="discount-tpl">
<div class="form-group m-form__group row">
<label class="col-xl-3 col-lg-3 col-form-label">* Discount::</label>
<div class="col-xl-9 col-lg-9">
<div id="asd"></div>
</div>
</div>
</template>

Show a div on select value codeigniter

I have this dropdown
<div class="box-body">
<div class="form-group">
<label class="col-sm-2 control-label col-sm-offset-2" for="LEAVE_ENTITLED"><span>*</span>Leave Entitled:</label>
<div class="col-sm-5">
<select class="form-control" name = "LEAVE_ENTITLED" id = "LEAVE_ENTITLED">
<option></option>
<option value= "Yes">Yes</option>
<option value= "No">No</option>
</select>
</div>
</div>
</div>
I want to hide this one,
<div class="box-body">
<div class="form-group">
<label class="col-sm-2 control-label col-sm-offset-2" for="SOLO_P"><span>*</span>Solo Parent ?<br>(If leave entitled)</label>
<div class="col-sm-5">
<select class="form-control" name = "SOLO_P">
<option></option>
<option value= "Yes">Yes</option>
<option value= "No">No</option>
</select>
</div>
</div>
</div>
and then when I selected yes on the first dropdown, it will show the second dropdown. how can I do this ?

what i did is
<div class="box-body">
<div class="form-group">
<label class="col-sm-2 control-label col-sm-offset-2" for="LEAVE_ENTITLED"><span>*</span>Leave Entitled:</label>
<div class="col-sm-5">
<select class="form-control" name = "LEAVE_ENTITLED" id = "LEAVE_ENTITLED">
<option></option>
<option value= "Yes">Yes</option>
<option value= "No">No</option>
</select>
</div>
</div>
</div>
<div class="solop box-body" style="display:none" id = "Yes">
<div class="form-group">
<label class="col-sm-2 control-label col-sm-offset-2" for="SOLO_P"><span>*</span>Solo Parent ?<br>(If leave entitled)</label>
<div class="col-sm-5">
<select class="form-control" name = "SOLO_P">
<option></option>
<option value= "Yes">Yes</option>
<option value= "No">No</option>
</select>
</div>
</div>
</div>
then my javascript is
$(function() {
$('#LEAVE_ENTITLED').change(function(){
$('.solop').hide();
$('#' + $(this).val()).show();
});
});

By default, hide the second drop down on page load.
Then check the first drop down value to be 'Yes' and remove hide class for second drop down.
$('#LEAVE_ENTITLED').on('change', function() {
var $this = $(this),
$dropdown2 = $('#ddlSecond');
if ($this.val() == 'Yes') {
$dropdown2.removeClass('hide');
} else {
$dropdown2.addClass('hide');
}
});
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet" />
<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="LEAVE_ENTITLED"><span>*</span>Leave Entitled:</label>
<div class="col-sm-5">
<select class="form-control" name="LEAVE_ENTITLED" id="LEAVE_ENTITLED">
<option></option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
</div>
</div>
<div class="box-body hide" id="ddlSecond">
<div class="form-group">
<label class="col-sm-2 control-label col-sm-offset-2" for="SOLO_P"><span>*</span>Solo Parent ?
<br>(If leave entitled)</label>
<div class="col-sm-5">
<select class="form-control" name="SOLO_P">
<option></option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
</div>
</div>

jQuery Chained Input

I've done some research but haven't been able to find and answer.
I have 1 text input and 1 selectbox.
If the selected value of the selectbox is 2, I 'd like the textbox to be hidden
If the selected value of selectbox is 1, the textbox should appear.
Here is my code:
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label">Pricing</label>
<div class="col-sm-10">
<select class="form-control" name="pricing">
<option>Please Select</option>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label">Our Text Input</label>
<div class="col-sm-10">
<input type="text" name="pricing" class="form-control">
</div>
</div>

You can assign an id to the form-group then use that to hide/show that element
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label">Fiyatlandırma</label>
<div class="col-sm-10">
<select class="form-control" name="fiyatlandirma">
<option>Please Select</option>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
</div>
</div>
<div class="form-group" id="fiyat-group">
<label class="col-sm-2 col-sm-2 control-label">Our Text Input</label>
<div class="col-sm-10">
<input type="text" name="fiyat" class="form-control"/>
</div>
</div>
then
//dom ready handler - wait for the element to load
jQuery(function($){
//change event handler to trigger when the select is changed
$('select[name="fiyatlandirma"]').change(function(){
//hide or display the group element based on the value of select
$('#fiyat-group').toggle(this.value == '2')
}).change();//to set the initial display state
})
http://learn.jquery.com/
http://learn.jquery.com/using-jquery-core/document-ready/
http://api.jquery.com/change
http://api.jquery.com/toggle

Try this:
$(document).ready(function(){
$("select.form-control").change(function(){
if($(this).val()=="1")
$("input[name=fiyat]").hide();
else
$("input[name=fiyat]").show();
});
});

You can give id to all three fields: select, input label and input box
$(document).ready(function () {
$("#pricing").change(function () {
if ($(this).val() == "1") {
$("#textbox").hide();
$("#textLabel").hide();
} else {
$("#textbox").show();
$("#textLabel").show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label">Pricing</label>
<div class="col-sm-10">
<select class="form-control" name="pricing" id="pricing">
<option>Please Select</option>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label" id="textLabel">Our Text Input</label>
<div class="col-sm-10">
<input type="text" name="pricing" id="textbox" class="form-control">
</div>
</div>

using java script
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label">Fiyatlandırma</label>
<div class="col-sm-10">
<select class="form-control" id="select" name="fiyatlandirma" onclick="hide()">
<option>Please Select</option>
<option value="1">Value 1</option>
<option value="2" >Value 2</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label">Our Text Input</label>
<div class="col-sm-10">
<input type="text" id="fiyat" name="fiyat" class="form-control">
</div>
</div>
<script>
function hide(){
var select = document.getElementById("select").selectedIndex;
var input = document.getElementById("fiyat");
if(select == 1)
input.style.visibility= "hidden";
else if(select == 2)
input.style.visibility= "visible";
}
</script>