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
Related
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>
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>
I want to get option like PCMB and PCMC in select option when I selected SCIENCE as a previous select tag and nothing when I selected Commerce.
<div class="row Time">
<div class="col-md-4 col-sm-4">
<p>Course<span class="astric">*</span></p>
<select class="Academic">
<option value="">Select</option>
<option value="" id="Science">Science</option>
<option value="" id="Commerce">Commerce</option>
<option value="" id="Arts">Arts</option>
</select>
</div>
<div class="col-md-4 col-sm-4">
<p>Branch<span class="astric">*</span></p>
<select class="Academic">
<option value="" id="Select">Select</option>
<option value="" id="PCMB">PCMB</option>
<option value="" id="PCMC">PCMC</option>
<option value="" id="PCMS">PCMS</option>
</select>
</div>
<div class="col-md-4 col-sm-4">
<p>Year<span class="astric">*</span></p>
<select class="Academic">
<option value="">Select</option>
<option value="" id="01">01</option>
<option value="" id="02">02</option>
</select>
</div>
</div>
You will have to make couple of changes to your code to achieve your desired result.
You should not include the second select box initially in DOM if you want to show it only after user select a specific value.
You will have to add values to your select Options
You Class or Id to your select boxes
Use Jquery .on('change') function to accomplish your desired result
Use the below code for further reference.
var selectLevelTwo = '<div class="col-md-4 col-sm-4 select-level-two"><p>Branch<span class="astric">*</span></p><select class="Academic"><option value="" id="Select">Select</option><option value="" id="PCMB">PCMB</option><option value="" id="PCMC">PCMC</option><option value="" id="PCMS">PCMS</option></select></div>';
$(document).on('change', '.select-level-one', function(){
var firstSelectValue = $('.select-level-one option:selected').val();
if(firstSelectValue == 'science'){
$(this).parent().after(selectLevelTwo);
} else {
$('.select-level-two').fadeOut('fast');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row Time">
<div class="col-md-4 col-sm-4">
<p>Course<span class="astric">*</span></p>
<select class="Academic select-level-one">
<option value="">Select</option>
<option value="science" id="Science">Science</option>
<option value="commerce" id="Commerce">Commerce</option>
<option value="arts" id="Arts">Arts</option>
</select>
</div>
<div class="col-md-4 col-sm-4">
<p>Year<span class="astric">*</span></p>
<select class="Academic">
<option value="">Select</option>
<option value="" id="01">01</option>
<option value="" id="02">02</option>
</select>
</div>
</div>
Hope this help
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>
I am building a hyrbid app using Ionic and need the dropdown control to update its value while the user is selecting a value. This way the user does not have to click "Done" or tap elsewhere on the screen to update the dropdown. This will also enable the next control. Ideally the user would select a value, the dropdown would update and unlock the other dropdown.
DOM
<div class="col">
<label class="item item-input">
<span class="input-label">When</span>
<input type="date" id="date" name="date" ng-model="postData.when" required>
</label>
</div>
</div>
<div class="row">
<div class="col">
<label class="item item-input item-select" ng-class="{'disabled' : subForm.date.$pristine}">
<div class="input-label">Location</div>
<select id="location" name="location" ng-init="postData.location=''" ng-disabled="subForm.date.$pristine" ng-model="postData.location" required>
<option value="" disabled hidden></option>
<option value="Denver Office">Denver Office</option>
<option value="DJ Basin">DJ Basin</option>
<option value="East Mediterranean">East Mediterranean</option>
<option value="Gulf of Mexico">Gulf of Mexico</option>
<option value="Houston Office">Houston Office</option>
<option value="Marcellus">Marcellus</option>
<option value="Texas">Texas</option>
<option value="West Africa">West Africa</option>
<option value="Other">Other</option>
</select>
</label>
</div>
</div>
<div class="row">
<div class="col">
<label class="item item-input item-select" ng-class="{'disabled' : subForm.date.$untouched || subForm.location.$untouched}">
<div class="input-label">Observation</div>
<select id="observationList" name="observationList" ng-disabled="subForm.date.$untouched || subForm.location.$untouched" ng-model="postData.category" required>
<option value="" disabled hidden></option>
<option value="Caught Between">Caught Between</option>
<option value="Dropped Object">Dropped Object</option>
<option value="Fall from Height">Fall from Height</option>
<option value="Personal Protective Equipment (PPE)">Personal Protective Equipment (PPE)</option>
<option value="Slip / Trip / Fall">Slip / Trip / Fall</option>
<option value="Strain / Overexertion">Strain / Overexertion</option>
<option value="Struck by">Struck by</option>
<option value="Spill / Release">Spill / Release</option>
<option value="Safe Work Practices">Safe Work Practices</option>
<option value="NO HARM">No Harm</option>
<option value="Other">Other</option>
</select>
</label>
</div>
</div>
I have tried using the different angular validation check properties such as $untouched, $pristine, etc. But each one waits for the dropdown to lose focus.