bootstrap 4 - form in modal, div not being displayed on select

bootstrap 4 - form in modal, div not being displayed on select - javascript

In a Laravel app I've got a form in a modal that on load shows just one select menu. When a user makes a selection a div needs to appear below with another select of subsequent options. I've tried a number of approaches from SO and Code Pen but can't seem to make the subsequent divs display. The code below is where I've finally ended up. Any help would be appreciated.
$(document).ready(function () {
$('.scopes').hide();
$('#programSelect').change(function () {
$('.scopes').hide();
$('#'+$(this).val()).show();
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label for="programSelect">Select Program</label>
<span class="bg-danger">{{ $errors->first('program') }}</span>
<select id="programSelect" class="form-control custom-select program-select" name="program">
<option></option>
#foreach($program as $program)
<option value="{{ $program->id }}">{{ $program->abbr }}</option>
#endforeach
</select>
</div>
<div class="form-group scopes nop" id="nop">
<label for="nopselect">Select NOP Scope</label>
<span class="bg-danger">{{ $errors->first('nopselect') }}</span>
<select name="scope_id" class="form-control custom-select" id="nopselect">
<option selected></option>
<option value="1">Crops</option>
<option value="2">Livestock</option>
<option value="3">Handling</option>
<option value="4">Wild Crops</option>
</select>
</div>
<div class="form-group scopes eu" id="eu">
<label for="euselect">Select EU Scope</label>
<span class="bg-danger">{{ $errors->first('euselect') }}</span>
<select name="scope_id" class="form-control custom-select" id="euselect">
<option selected></option>
<option value="5">Unprocessed Plant Products</option>
<option value="6">Livestock</option>
<option value="7">Handling</option>
<option value="8">Feed</option>
<option value="9">Seed</option>
<option value="10">Aquaculture</option>
</select>
</div>
<div class="form-group scopes jpexport" id="jpexport">
<label for="jpexportselect">Select JP Export Scope</label>
<span class="bg-danger">{{ $errors->first('jpexportselect') }}</span>
<select name="scope_id" class="form-control custom-select" id="jpexportselect">
<option selected></option>
<option value="27">Crops</option>
<option value="28">Handling</option>
</select>
</div>
<div class="form-group scopes gots" id="gots">
<label for="gotsselect">Select GOTS Scope</label>
<span class="bg-danger">{{ $errors->first('gotsselect') }}</span>
<select name="scope_id" class="form-control custom-select" id="gotsselect">
<option selected></option>
<option value="17">Dry</option>
<option value="18">Wet</option>
<option value="19">Trading</option>
<option value="20">Inputs</option>
</select>
</div>
<div class="form-group scopes te" id="te">
<label for="teselect">Select TE Scope</label>
<span class="bg-danger">{{ $errors->first('teselect') }}</span>
<select name="scope_id" class="form-control custom-select" id="teselect">
<option selected></option>
<option value="25">OE</option>
<option value="26">OCS</option>
</select>
</div>
<div class="form-group scopes cor" id="cor">
<label for="corselect">Select COR Scope</label>
<span class="bg-danger">{{ $errors->first('corselect') }}</span>
<select name="scope_id" class="form-control custom-select" id="corselect">
<option selected></option>
<option value="29">Crops</option>
</select>
</div>
<div class="form-group scopes jas" id="jas">
<label for="jasselect">Select JAS Scope</label>
<span class="bg-danger">{{ $errors->first('jasselect') }}</span>
<select name="scope_id" class="form-control custom-select" id="jasselect">
<option selected></option>
<option value="11">Crops</option>
<option value="12">Handling</option>
<option value="13">Repack Crops</option>
<option value="14">Repack Food</option>
<option value="15">Feed</option>
<option value="16">Repack Feed</option>
<option value="30">Wild Harvest</option>
</select>
</div>
<div class="form-group scopes npop" id="npop">
<label for="npopselect">Select NPOP Scope</label>
<span class="bg-danger">{{ $errors->first('npopselect') }}</span>
<select name="scope_id" class="form-control custom-select" id="npopselect">
<option selected></option>
<option value="21">Crops</option>
<option value="22">Livestock</option>
<option value="23">Processing</option>
<option value="24">Trading</option>
</select>
</div>

Related

Get the looping selected input value and sum the value inside when it change

I have a simple form that loops some select elements from the server. In this case, I want to sum every option value that selected and not the disabled one and show the calculation of these values into the input value every time when the user change the value inside it. How is it work with onchage event. Thanks in advance.
HTML Code Example
<form>
<div class="form-group">
<select class="1 presence-value form-control" name="presence-value" required>
<option value="">-- Select--</option>
<option value="1" selected>Full</option>
<option value="0.5">Half</option>
<option value="0">None</option>
</select>
</div>
<div class="form-group">
<select class="1 presence-value form-control" name="presence-value" required>
<option value="">-- Select--</option>
<option value="1" selected>Full</option>
<option value="0.5">Half</option>
<option value="0">None</option>
</select>
</div>
<div class="form-group">
<select class="2 presence-value form-control" name="presence-value" disabled required>
<option value="">-- Select--</option>
<option value="1">Full</option>
<option value="0.5">Half</option>
<option value="0" selected>None</option>
</select>
</div>
<div class="form-group">
<select class="2 presence-value form-control" name="presence-value" disabled required>
<option value="">-- Select--</option>
<option value="1">Full</option>
<option value="0.5">Half</option>
<option value="0" selected>None</option>
</select>
</div>
<input type="number" value="0" required>
<button type="submit">Submit</button>
</form>

Filter, Map and reduce
$(function() {
const sumSels = () => $("#total").val($sels
.filter(":enabled") // this is not strictly needed in your case
.map(function() { return +this.value })
.get()
.reduce((a, b) => a + b)
.toFixed(2));
const $sels = $('[name="presence-value"]');
$sels.on("change", sumSels); // event handler
sumSels(); // initialise on load
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div class="form-group">
<select class="1 presence-value form-control" name="presence-value" required>
<option value="">-- Select--</option>
<option value="1" selected>Full</option>
<option value="0.5">Half</option>
<option value="0">None</option>
</select>
</div>
<div class="form-group">
<select class="1 presence-value form-control" name="presence-value" required>
<option value="">-- Select--</option>
<option value="1" selected>Full</option>
<option value="0.5">Half</option>
<option value="0">None</option>
</select>
</div>
<div class="form-group">
<select class="2 presence-value form-control" name="presence-value" disabled required>
<option value="">-- Select--</option>
<option value="1">Full</option>
<option value="0.5">Half</option>
<option value="0" selected>None</option>
</select>
</div>
<div class="form-group">
<select class="2 presence-value form-control" name="presence-value" disabled required>
<option value="">-- Select--</option>
<option value="1">Full</option>
<option value="0.5">Half</option>
<option value="0" selected>None</option>
</select>
</div>
<input type="number" value="0" readonly id="total">
<button type="submit">Submit</button>
</form>
Version with dynamically added or removed selects
$(function() {
const sumSels = (e) => $("#total").val(
$("form").find('[name="presence-value"]')
.filter(":enabled") // this is not strictly needed in your case
.map(function() {
return +this.value
})
.get()
.reduce((a, b) => a + b)
.toFixed(2));
$("form").on("change", "[name='presence-value']", sumSels); // event handler on existing sels
sumSels(); // initialise on load
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div class="form-group">
<select class="1 presence-value form-control" name="presence-value" required>
<option value="">-- Select--</option>
<option value="1" selected>Full</option>
<option value="0.5">Half</option>
<option value="0">None</option>
</select>
</div>
<div class="form-group">
<select class="1 presence-value form-control" name="presence-value" required>
<option value="">-- Select--</option>
<option value="1" selected>Full</option>
<option value="0.5">Half</option>
<option value="0">None</option>
</select>
</div>
<div class="form-group">
<select class="2 presence-value form-control" name="presence-value" disabled required>
<option value="">-- Select--</option>
<option value="1">Full</option>
<option value="0.5">Half</option>
<option value="0" selected>None</option>
</select>
</div>
<div class="form-group">
<select class="2 presence-value form-control" name="presence-value" disabled required>
<option value="">-- Select--</option>
<option value="1">Full</option>
<option value="0.5">Half</option>
<option value="0" selected>None</option>
</select>
</div>
<input type="number" value="0" readonly id="total">
<button type="submit">Submit</button>
</form>

You can just listen to the change event from any of the selects, then add their values together
$(document).ready(function() {
$('select').change(function() {
let total = 0;
$('select').each(function() {
total += +$(this).val()
})
console.log('the total is', total)
$('[name=total]').val(total)
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div class="form-group">
<select class="1 presence-value form-control" name="presence-value" required>
<option value="">-- Select--</option>
<option value="1" selected>Full</option>
<option value="0.5">Half</option>
<option value="0">None</option>
</select>
</div>
<div class="form-group">
<select class="1 presence-value form-control" name="presence-value" required>
<option value="">-- Select--</option>
<option value="1" selected>Full</option>
<option value="0.5">Half</option>
<option value="0">None</option>
</select>
</div>
<div class="form-group">
<select class="2 presence-value form-control" name="presence-value" disabled required>
<option value="">-- Select--</option>
<option value="1">Full</option>
<option value="0.5">Half</option>
<option value="0" selected>None</option>
</select>
</div>
<div class="form-group">
<select class="2 presence-value form-control" name="presence-value" disabled required>
<option value="">-- Select--</option>
<option value="1">Full</option>
<option value="0.5">Half</option>
<option value="0" selected>None</option>
</select>
</div>
<input name='total' type="number" value="0" required>
<button type="submit">Submit</button>
</form>

You need to use document.querySelectorAll('select') to get all select tags and then by selectedOptions get selected value of each select tags and calculate sum of them.
All above actions is in the one method (say getSum) that you can bind with onchange="getSum()" of each select tag.
Note that this solution is based on pure javascript code and I don't use any js library.
function getSum() {
var selectes = document.querySelectorAll('select');
sum = 0;
for (var i = 0; i < selectes.length; i++) {
sum += +selectes[i].value;
}
document.getElementById("submited").value = sum;
}
<form>
<div class="form-group">
<select class="1 presence-value form-control" name="presence-value" required onchange="getSum()">
<option value="">-- Select--</option>
<option value="1" selected>Full</option>
<option value="0.5">Half</option>
<option value="0">None</option>
</select>
</div>
<div class="form-group">
<select class="1 presence-value form-control" name="presence-value" required onchange="getSum()">
<option value="">-- Select--</option>
<option value="1" selected>Full</option>
<option value="0.5">Half</option>
<option value="0">None</option>
</select>
</div>
<div class="form-group">
<select class="2 presence-value form-control" name="presence-value" disabled required onchange="getSum()">
<option value="">-- Select--</option>
<option value="1">Full</option>
<option value="0.5">Half</option>
<option value="0" selected>None</option>
</select>
</div>
<div class="form-group">
<select class="2 presence-value form-control" name="presence-value" disabled required onchange="getSum()">
<option value="">-- Select--</option>
<option value="1">Full</option>
<option value="0.5">Half</option>
<option value="0" selected>None</option>
</select>
</div>
<input id="submited" type="number" value="0" required>
<button type="submit">Submit</button>

javascript calculation on calculating once a client clicks on a form option

I am doing a small project on creating an order form.
I am trying to display the price per page once the client selects the time.
For example if the selected time is 4hour it should return 12usd.. if its 6hours it should return 10 usd......
<div class="col-md-6">
<div class=" custom-select" style="width:200px;">
<select class="form-control" id="time">
<option value="0">Time...</option>
<option value="1">4hrs</option>
<option value="2">6hrs</option>
<option value="3">1day</option>
<option value="4">2days</option>
<option value="5">3days</option>
<option value="6">4days</option>
<option value="7">5days</option>
<option value="8">6days</option>
<option value="9">7days</option>
<option value="10">After 7 days</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="bmd-label-floating">cpp</label>
<input type="text" class="form-control" id="cpp">
</div>
</div>

You can make something like this.
const selectElement = document.querySelector('.ice-cream');
selectElement.addEventListener('change', (event) => {
const result = document.querySelector('.result');
result.textContent = `You like ${event.target.value}`;
});
<label>Choose an ice cream flavor:
<select class="ice-cream" name="ice-cream">
<option value="">Select One …</option>
<option value="chocolate">Chocolate</option>
<option value="sardine">Sardine</option>
<option value="vanilla">Vanilla</option>
</select>
</label>
<div class="result"></div>

So you won't tell us in details so we have to guess
const prices = [0,12,10,9,8,7,6,5,4,3,2],
cpp = document.getElementById('cpp'),
time = document.getElementById('time')
time.addEventListener('change',function() {
cpp.value = prices[this.value]
})
// init if the select is already set from server
const change = new CustomEvent("change");
time.dispatchEvent(change);
<div class="col-md-6">
<div class=" custom-select" style="width:200px;">
<select class="form-control" id="time">
<option value="0">Time...</option>
<option value="1">4hrs</option>
<option value="2">6hrs</option>
<option value="3">1day</option>
<option value="4">2days</option>
<option value="5">3days</option>
<option value="6">4days</option>
<option value="7">5days</option>
<option value="8">6days</option>
<option value="9">7days</option>
<option value="10">After 7 days</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="bmd-label-floating">cpp</label>
<input type="text" class="form-control" id="cpp">
</div>
</div>

2 Select with same options, alerting when it is already selected at the first Select

I'm having a hard time with this, basically I have 2 Select with same options. The 2 Select Inputs named as registrationdiscounttype1 and registrationdiscounttype2
So First I choose a discount for registrationdiscounttype1 then if I will add a discount for registrationdiscounttype2 if the option is already selected in discount number 1 it will show an error that will say the discount is already selected.
I've already made a javascript based on what I've search so far, but I can't make it work, can you help me what is wrong with my code, or what should I use?
This is the sample photo
// Change in Discount 2
$("#registrationdiscounttype2").unbind('change').bind('change', function()
if ($('#registrationdiscounttype2').closest('table').find('option[value=' + $('#registrationdiscounttype1').val() + ']:selected').length > 1)
{
alert('Discount is already selected, Please choose another one');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="form-group">
<label for="registrationdiscounttype1" class="col-sm-4 control-label">Discount 1: </label>
<div class="col-sm-8">
<select class="form-control" name="registrationdiscounttype1" id="registrationdiscounttype1">
<option value="">Select Discount </option>
<?php foreach ($discounttypeData as $discounttype)
{
?>
<option value="<?php echo $discounttype['discounttype_id']; ?>"> <?php echo $discounttype['discounttype_name']; ?> </option>
<?php
}
?>
</select>
</div>
</div>
<div class="form-group">
<label for="registrationdiscounttype2" class="col-sm-4 control-label">Discount 2: </label>
<div class="col-sm-8">
<select class="form-control" name="registrationdiscounttype2" id="registrationdiscounttype2">
<option value="">Select Discount </option>
<?php foreach ($discounttypeData as $discounttype)
{
?>
<option value="<?php echo $discounttype['discounttype_id']; ?>"> <?php echo $discounttype['discounttype_name']; ?> </option>
<?php
}
?>
</select>
</div>
</div>

u can try
$(document).ready(function(){
$("#registrationdiscounttype2").unbind('change').bind('change', function() {
if ($('#registrationdiscounttype2').val() == $('#registrationdiscounttype1').val())
{
alert('Discount is already selected, Please choose another one');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label for="registrationdiscounttype1" class="col-sm-4 control-label">Discount 1: </label>
<div class="col-sm-8">
<select class="form-control" name="registrationdiscounttype1" id="registrationdiscounttype1">
<option value="">Select Discount </option>
<option value="1">1 </option>
<option value="2">2 </option>
</select>
</div>
</div>
<div class="form-group">
<label for="registrationdiscounttype2" class="col-sm-4 control-label">Discount 2: </label>
<div class="col-sm-8">
<select class="form-control" name="registrationdiscounttype2" id="registrationdiscounttype2">
<option value="">Select Discount </option>
<option value="1">1 </option>
<option value="2">2 </option>
</select>
</div>
<div class="form-group" id="result">
</div>

Here you go with an example solution (if select element are siblings) https://jsfiddle.net/pvchxyup/1/
$('select').change(function(){
if($(this).val() === $(this).siblings('select').val() ){
console.log("Same value!!!");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value="test1">Test 1</option>
<option value="test2">Test 2</option>
<option value="test5">Test 5</option>
</select>
<select>
<option value="test1">Test 1</option>
<option value="test2">Test 2</option>
<option value="test7">Test 7</option>
</select>
If your element are not siblings, then follow https://jsfiddle.net/pvchxyup/2/
$('select').change(function(){
if($('#select1').val() === $('#select2').val() ){
console.log("Same value!!!");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<select id="select1">
<option value="test1">Test 1</option>
<option value="test2">Test 2</option>
<option value="test5">Test 5</option>
</select>
</div>
<div>
<select id="select2">
<option value="test1">Test 1</option>
<option value="test2">Test 2</option>
<option value="test7">Test 7</option>
</select>
</div>

No need to use bind, simple and easy way to do that.
Try this:
$("#registrationdiscounttype2").change(function(){
if($(this).val()==$('#registrationdiscounttype1').val()){
alert("Already Selected");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label for="registrationdiscounttype1" class="col-sm-4 control-label">Discount 1: </label>
<div class="col-sm-8">
<select class="form-control" name="registrationdiscounttype1" id="registrationdiscounttype1">
<option value="">Select Discount </option>
<option value="sel1">sel1</option>
<option value="sel2">sel2</option>
</select>
</div>
</div>
<div class="form-group">
<label for="registrationdiscounttype2" class="col-sm-4 control-label">Discount 2: </label>
<div class="col-sm-8">
<select class="form-control" name="registrationdiscounttype2" id="registrationdiscounttype2">
<option value="">Select Discount </option>
<option value="sel1">sel1</option>
<option value="sel2">sel2</option>
</select>
</div>

How can i set selected value after submit form

I have a form with month and year to select. I want to save selected values after page reload. I have project in django and i don't have any idea how do it.
<form class="form-horizontal" method="post" action="show_incomes">{% csrf_token %}{{form}}
<div class="form-group ">
<label class="control-label col-sm-5" for="miesiac">Wybierz miesiąc</label>
<div class="col-sm-3">
<select class="select form-control" id="miesiac" name="miesiac">
<option value="01" >Styczeń</option>
<option value="02" >Luty</option>
<option value="03" >Marzec</option>
<option value="04" >Kwiecień</option>
<option value="05" >Maj</option>
<option value="06" >Czerwiec</option>
<option value="07" >Lipiec</option>
<option value="08" >Sierpień</option>
<option value="09" >Wrzesień</option>
<option value="10" >Październik</option>
<option value="11" >Listopad</option>
<option value="12" >Grudzień</option>
</select>
</div>
</div>
<label class="control-label col-sm-5" for="rok">Wybierz rok</label>
<div class="col-sm-2">
<select class="select form-control" id="rok" name="rok" >
<option value="2017" >2017</option>
<option value="2018" >2018</option>
<option value="2019" >2019</option>
<option value="2020" >2020</option>
<option value="2021" >2021</option>
<option value="2022" >2022</option>
<option value="2023" >2023</option>
<option value="2024" >2024</option>
<option value="2025" >2025</option>
</select><br>
<button type="submit" class="btn btn-large btn-info">Pokaż przychody</button>
</div>
</form>

You can use local storage/ session storage to save data
Check here

Multi div id hide/show Jquery

I've been trying to get a div to show and hide based on a dropdown.
I have 3 hidden divs but only 2 show. The issue is I have to have multiple ID's for some divs.
the two display as handset are fine but the id="Handset Tablet" won't show. Does my jquery need to see if it just contains the id as I guess it is just looking for "Handset" not two.
Here is my code. I need to have all 3 divs with Handset show and Tablet only show the shared one somehow.
http://jsfiddle.net/jonasj/k2sxdh5s/
<div class="form-group"><label class="col-md-3 control-label">Product Type</label>
<div class="col-md-9">
<select name="product_type" id="product_type" class="form-control check_record">
<option selected value="0" >-Select Product Type-</option>
<option value="Handset">Handset</option>
<option value="Tablet" >Tablet</option>
</select>
</div>
</div>
<div id="Handset" class="hide_listing form-group"><label class="col-md-3 control-label">Spec</label>
<div class="col-md-9">
<select class="form-control" name="spec">
<option selected value="" disbaled>- Device Spec -</option>
</select>
</div>
</div>
<div id="Handset" class="hide_listing form-group"><label class="col-md-3 control-label">Capacity</label>
<div class="col-md-9">
<select class="form-control" name="device_capacity">
<option selected disabled value="">- Select Device Capacity -</option>
<option value="2GB">2GB</option>
<option value="4GB">4GB</option>
<option value="8GB">8GB</option>
<option value="16GB">16GB</option>
<option value="32GB">32GB</option>
<option value="64GB">64GB</option>
<option value="128GB">128GB</option>
<option value="256GB">256GB</option>
<option value="Unknown">Unknown</option>
</select>
</div>
</div>
<div id="Handset Tablet" class="hide_listing form-group"><label class="col-md-3 control-label">Sim Status</label>
<div class="col-md-9">
<select class="form-control" name="device_sim">
<option selected disabled value="">- Select Device Sim Status -</option>
<option value="Sim Free">Sim Free</option>
<option value="Network Locked">Network Locked</option>
<option value="Network Unlocked">Network Unlocked</option>
<option value="Unknown">Unknown</option>
</select>
</div>
</div>
<script>
$(document).ready(function () {
$('.hide_listing').hide();
$('').show();
$('#product_type').change(function () {
$('.hide_listing').hide();
$('div#'+$(this).val()).show();
})
});
</script>

Since IDs are unique, you can use classes to achieve what you want:
<div class="form-group"><label class="col-md-3 control-label">Product Type</label>
<div class="col-md-9">
<select name="product_type" id="product_type" class="form-control check_record">
<option selected value="0" >-Select Product Type-</option>
<option value="Handset">Handset</option>
<option value="Tablet">Tablet</option>
</select>
</div>
</div>
<div class="Handset hide_listing form-group"><label class="col-md-3 control-label">Spec</label>
<div class="col-md-9">
<select class="form-control" name="spec">
<option selected value="" disbaled>- Device Spec -</option>
</select>
</div>
</div>
<div class="Handset hide_listing form-group"><label class="col-md-3 control-label">Capacity</label>
<div class="col-md-9">
<select class="form-control" name="device_capacity">
<option selected disabled value="">- Select Device Capacity -</option>
<option value="2GB">2GB</option>
<option value="4GB">4GB</option>
<option value="8GB">8GB</option>
<option value="16GB">16GB</option>
<option value="32GB">32GB</option>
<option value="64GB">64GB</option>
<option value="128GB">128GB</option>
<option value="256GB">256GB</option>
<option value="Unknown">Unknown</option>
</select>
</div>
</div>
<div class="Handset Tablet hide_listing form-group"><label class="col-md-3 control-label">Sim Status</label>
<div class="col-md-9">
<select class="form-control" name="device_sim">
<option selected disabled value="">- Select Device Sim Status -</option>
<option value="Sim Free">Sim Free</option>
<option value="Network Locked">Network Locked</option>
<option value="Network Unlocked">Network Unlocked</option>
<option value="Unknown">Unknown</option>
</select>
</div>
</div>
And change your function to include the classes:
$(document).ready(function () {
$('.hide_listing').hide();
$('#product_type').change(function () {
$('.hide_listing').hide();
$('div.'+$(this).val()).show();
})
});
Though you may want to just go with classes all together, as to avoid confusion in the future.
DEMO: http://jsfiddle.net/k2sxdh5s/7/

Put this as HTML
<div class="form-group"><label class="col-md-3 control-label">Product Type</label>
<div class="col-md-9">
<select name="product_type" id="product_type" class="form-control check_record">
<option selected value="0" >-Select Product Type-</option>
<option value="Handset">Handset</option>
<option value="Tablet" >Tablet</option>
</select>
</div>
</div>
<div class="Handset hide_listing form-group"><label class="col-md-3 control-label">Spec</label>
<div class="col-md-9">
<select class="form-control" name="spec">
<option selected value="" disbaled>- Device Spec -</option>
</select>
</div>
</div>
<div class="Handset hide_listing form-group"><label class="col-md-3 control-label">Capacity</label>
<div class="col-md-9">
<select class="form-control" name="device_capacity">
<option selected disabled value="">- Select Device Capacity -</option>
<option value="2GB">2GB</option>
<option value="4GB">4GB</option>
<option value="8GB">8GB</option>
<option value="16GB">16GB</option>
<option value="32GB">32GB</option>
<option value="64GB">64GB</option>
<option value="128GB">128GB</option>
<option value="256GB">256GB</option>
<option value="Unknown">Unknown</option>
</select>
</div>
</div>
<div class="Handset Tablet hide_listing form-group"><label class="col-md-3 control-label">Sim Status</label>
<div class="col-md-9">
<select class="form-control" name="device_sim">
<option selected disabled value="">- Select Device Sim Status -</option>
<option value="Sim Free">Sim Free</option>
<option value="Network Locked">Network Locked</option>
<option value="Network Unlocked">Network Unlocked</option>
<option value="Unknown">Unknown</option>
</select>
</div>
</div>
and put this as jquery
$(document).ready(function () {
$('.hide_listing').hide();
$('#product_type').change(function () {
$('.hide_listing').hide();
var show_div = $(this).val();
if(show_div == "Handset") {
$(".Handset").show();
} else if (show_div == "Tablet") {
$(".Tablet").show();
}
})
});
This will make it work...surely

Develop Reference

JavaScript is the programming language of the Web.

bootstrap 4 - form in modal, div not being displayed on select - javascript

Related

Get the looping selected input value and sum the value inside when it change

javascript calculation on calculating once a client clicks on a form option

2 Select with same options, alerting when it is already selected at the first Select

How can i set selected value after submit form

Multi div id hide/show Jquery

Categories

Resources