Develop Reference

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>

Hide option of 3rd select list which are selected in 1st and 2nd select list

I have 3 select list in which 1st for x axis and 2nd for y axis with common options in all 3 select list
I want to hide options of 3rd select list which are selected in 1st and 2nd and show remaining
this must happen every time changed the 1st and 2nd select list and show last hidden options.
Please some one help me
<div class="col-md-6 col-sm-6 form-group DropDown1">
<select class="form-control DropDown" name="DropDown1" id="DropDown1">
<option value="">Select Options to Search</option>
<option value="11">11</option>
<option value="22">22</option>
<option value="33">33</option>
<option value="44">44</option>
</select>
</div>
<div class="col-md-6 col-sm-6 form-group DropDown2">
<select class="form-control DropDown" name="DropDown2" id="DropDown2">
<option value="">Select Options to Search</option>
<option value="11">11</option>
<option value="22">22</option>
<option value="33">33</option>
<option value="44">44</option>
</select>
</div>
<div class="col-md-12 col-sm-12">
<legend>Advanced Search Options</legend>
</div>
<div class="col-md-4 col-sm-4 form-group DropDown3">
<select class="form-control DropDowns" name="DropDown3" id="DropDown3">
<option value="">Select Options to Search</option>
<option id="DropDown_opt11" value="opt11">11</option>
<option id="DropDown_opt22" value="opt22">22</option>
<option id="DropDown_opt33" value="opt33">33</option>
<option id="DropDown_opt44" value="opt44">44</option>
<option id="DropDown_opt55" value="opt55">55</option>
</select>
</div>
I am hiding with this jquery but when i reselect 1st or 2nd select list option
last hidden option is not shown its goes on hinding options
var drop2;
var drop1;
$(document).ready(function(){
$('.DropDown1').on('change',"#DropDown1",function(){
drop1 = $("#DropDown1 option:selected").val();
});
$('.DropDown2').on('change',"#DropDown2",function(){
drop2 = $("#DropDown2 option:selected").val();
});
});
$('.DropDown3').click(function(){
var selector2 = 'DropDown_opt'+drop1;
var selector3 = 'DropDown_opt'+drop2;
$("#"+selector2).hide(selector2);
$("#"+selector3).hide(selector3);
});

You need to unhide the options that are hidden. I added a function to unhide the previously hidden options.
Check the fiddle https://jsfiddle.net/he4wq196/1/
function unhideOptions() {
$('#DropDown3 > option').each(function(){
$(this).show();
});
}

Use .prop("disabled",true) to disable the option or .hide() to hide it.
I've also cleaned your code a bit
var drop1, drop2;
$(document).ready(function() {
$(document).on('change', "#DropDown1,#DropDown2", function() {
var d = $(this).attr("id").replace("DropDown","drop");
window[d] = 'DropDown_opt' + $(this).find("option:selected").val();
hideoptions()
});
});
function hideoptions() {
$("#DropDown3 option").prop("disabled", false);
$("#DropDown3 #" + drop1).prop("disabled", true);
$("#DropDown3 #" + drop2).prop("disabled", true);
};
var drop1, drop2;
$(document).ready(function() {
$(document).on('change', "#DropDown1,#DropDown2", function() {
var d = $(this).attr("id").replace("DropDown","drop");
window[d] = 'DropDown_opt' + $(this).find("option:selected").val();
hideoptions()
});
});
function hideoptions() {
$("#DropDown3 option").prop("disabled", false);
$("#DropDown3 #" + drop1).prop("disabled", true);
$("#DropDown3 #" + drop2).prop("disabled", true);
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-6 col-sm-6 form-group DropDown1">
<select class="form-control DropDown" name="DropDown1" id="DropDown1">
<option value="">Select Options to Search</option>
<option value="11">11</option>
<option value="22">22</option>
<option value="33">33</option>
<option value="44">44</option>
</select>
</div>
<div class="col-md-6 col-sm-6 form-group DropDown2">
<select class="form-control DropDown" name="DropDown2" id="DropDown2">
<option value="">Select Options to Search</option>
<option value="11">11</option>
<option value="22">22</option>
<option value="33">33</option>
<option value="44">44</option>
</select>
</div>
<div class="col-md-12 col-sm-12">
<legend>Advanced Search Options</legend>
</div>
<div class="col-md-4 col-sm-4 form-group DropDown3">
<select class="form-control DropDowns" name="DropDown3" id="DropDown3">
<option value="">Select Options to Search</option>
<option id="DropDown_opt11" value="opt11">11</option>
<option id="DropDown_opt22" value="opt22">22</option>
<option id="DropDown_opt33" value="opt33">33</option>
<option id="DropDown_opt44" value="opt44">44</option>
<option id="DropDown_opt55" value="opt55">55</option>
</select>
</div>

JQuery: Counter wrapped in an if statement not working?

So I have two of these select menus, and I want the counter to add 1 each time a right selection is selected in each selection. But it stays at 1.. How do I fix this?
HTML:
<div class="row"><!--first row-->
<div class="col-sm-3 col-xs-12 unit" >
<img src="img/shiny-apple.png" id="apple">
<p class="selectby">Fruit</p>
<select>
<option value="default"></option>
<option value="apple">apple</option>
<option value="banana">banana</option>
<option value="grapes">grapes</option>
<option value="carrot">carrot</option>
</select>
</div><!-- end of col-->
<div class="col-sm-3 col-xs-12 unit" >
<img src="img/carrot.png" id="carrot">
<p class="selectby">Fruit</p>
<select>
<option value="default"></option>
<option value="apple">apple</option>
<option value="banana">banana</option>
<option value="grapes">grapes</option>
<option value="carrot">carrot</option>
</select>
</div><!-- end of col-->
JS:
$("select").change(function() {
$selectedItem = $(this).val();
$imgId = $(this).siblings().attr('id');
var counter = 0;
// if the image ID string includes the selected option string
if ( $imgId.includes($selectedItem) ) {
$(this).parent().css("background-color", "lightgreen");
$(this).prop('disabled', true);
counter++;
console.log(counter);
}
});

var counter = 0;//put counter outside of change so it wont be initialize to 0 every change event
$("select").change(function() {
$selectedItem = $(this).val();
$imgId = $(this).siblings().attr('id');
// if the image ID string includes the selected option string
if ($imgId.includes($selectedItem)) {
$(this).parent().css("background-color", "lightgreen");
$(this).prop('disabled', true);
counter++;
console.log(counter);
}
alert(counter)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<!--first row-->
<div class="col-sm-3 col-xs-12 unit">
<img src="img/shiny-apple.png" id="apple">
<p class="selectby">Fruit</p>
<select>
<option value="default"></option>
<option value="apple">apple</option>
<option value="banana">banana</option>
<option value="grapes">grapes</option>
<option value="carrot">carrot</option>
</select>
</div>
<!-- end of col-->
<div class="col-sm-3 col-xs-12 unit">
<img src="img/carrot.png" id="carrot">
<p class="selectby">Fruit</p>
<select>
<option value="default"></option>
<option value="apple">apple</option>
<option value="banana">banana</option>
<option value="grapes">grapes</option>
<option value="carrot">carrot</option>
</select>
</div>
<!-- end of col-->
place the counter outside the change event. Because every change event it is initialized to 0 again

change select to input in cart

I'm trying to change a select list to a text input (an example is amazon cart) based on a value of 10. What I have works for 1 row but I want to add multiple rows. I need some help changing the jquery to only change 1 row at a time.
$(function() {
$('.dropdown-change').on('change', function() {
var dropdownValue = $(this).val();
if (dropdownValue == 10) {
$('.dropdown-control').hide();
$('.input-control').show();
} else {
$('.dropdown-control').show();
$('.input-control').hide();
}
return false;
});
});
.input-control {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="row dropdown-row">
<div class="col-xs-2 col sm-2 col-md-2">
<label for="quantity">Qty</label>
</div>
<div class="col-xs-8 col-sm-8 col-md-8">
<div class="dropdown-control">
<div class="col-xs-12 col-sm-12 col-md-6 no-pad-left">
<select name="quantity" class="form-control dropdown-change">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10+</option>
</select>
</div>
</div>
<div class="input-control">
<div class="col-md-6 no-pad-left">
<input type="text" value="10" size="10" name="quantity" id="quantity" class="form-control" />
</div>
<div class="col-md-6 no-pad-left">
<button class="btn btn-primary btn-xs">update</button>
</div>
</div>
</div>
</div>

I fixed this by changing my HTML around and using $(this).closest() and $(this).next()

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