Display None on Select Option based on the data - javascript

I actually have a multiple dropdown. what I want is, if I select the first dropdown and I have the data-ts which is 1. I want that all of my dropdown option that has a data-ts 1 to have a style attribute display none except for the one that I selected.
here's what I have done so far:
HTML
<select class="selection" name="first">
<option value="1" data-ts="1">1</option>
<option value="2" data-ts="2">2</option>
</select>
<select class="selection" name="second">
<option value="3" data-ts="1">1</option>
<option value="4" data-ts="2">2</option>
</select>
<select class="selection" name="third">
<option value="5" data-ts="1">1</option>
<option value="6" data-ts="2">2</option>
</select>
JQUERY
$(".selection").on('change', function(){
var $this = $(this);
var $selected = $this.find(":selected").data('ts');
$(".selected").each(function(){
alert($(this).val());
});
});
thanks in advance.

try this
$(".selection").on('change', function() {
var $this = $(this);
var $selected = $this.find(":selected").data('ts');
console.log($selected);
var i = 0;
var array = [];
$(".selection").each(function() {
if($this.attr('name')!= $(this).attr('name'))
{
if($(this).find("option:selected").attr('data-ts') == $selected)
{
$(this).val('');
}
}
if($(this).find("option:selected").data('ts') != 'undifined' )
{
array[i] = $(this).find("option:selected").data('ts');
i = i+1;
}
});
$(".selection").each(function() {
if($(this).val()=='')
{
$(this).find("option").show();
for(j=0;j<array.length;j++)
{
$(this).find("option[data-ts='" + array[j] + "']").hide();
}
}
});
});
JSFiddle link for same
https://jsfiddle.net/0y8L4y1e/5/

Try something like this. You have to check if data-ts is equal to the selected data-ts and that the option you want to hide IS NOT the option you just selected.
$(".selection").on('change', function () {
var $this = $(this);
var $selected = $this.find(":selected");
var selectedTsData = $selected.data('ts');
$(".selection option").each(function () {
$(this).show();
if ($(this).data('ts') === selectedTsData && $(this) !== $selected) {
$(this).hide();
}
});
});

You can do something like this:
$(".selection").on('change', function() {
$(".selection").each(function() {
$(this).find("option").show();
});
var $this = $(this);
var $selected = $this.find(":selected").data('ts');
console.log($selected)
$(".selection").each(function() {
$(this).find("option[data-ts='" + $selected + "']").hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="selection" name="first">
<option value="">Select</option>
<option value="1" data-ts="1">1</option>
<option value="2" data-ts="2">2</option>
</select>
<select class="selection" name="second">
<option value="">Select</option>
<option value="3" data-ts="1">1</option>
<option value="4" data-ts="2">2</option>
</select>
<select class="selection" name="third">
<option value="">Select</option>
<option value="5" data-ts="1">1</option>
<option value="6" data-ts="2">2</option>
</select>

Related

How to change the name of a select tag attribute with jquery

First of all,
when I select a value from select tag. Change the input value of the checkbox.
window.addEventListener("load", function() { // on page load
document.getElementById("myselectbox1").addEventListener("change", function() {
document.getElementById("mycheckbox1").value = this.value;
});
document.getElementById("mycheckbox1").addEventListener("change", function() {
console.log(this.value);
});
});
<input type="checkbox" name="id" value="" id="mycheckbox1">
<select name="cat-1" id="myselectbox1">
<option value="">Choose</option>
<option value="100">Value1</option>
<option value="200">Value2</option>
</select>
How can I change the name of cat-2 to the chosen value of cat-1
For example;
if I choose value1 ( its value=100)
I want to change the name of cat-2 to cat-100
<input type="checkbox" name="id" value="" id="mycheckbox1">
<select name="cat-1" id="myselectbox1">
<option value="">Choose</option>
<option value="100">Value1</option>
<option value="200">Value2</option>
</select>
<select name="cat-2" id="myselectbox2">
<option value="">Choose</option>
<option value="300">Value3</option>
<option value="400">Value4</option>
</select>
Just continue my script from your other question
window.addEventListener("load", function() { // on page load
document.getElementById("myselectbox1").addEventListener("change", function() {
document.getElementById("mycheckbox1").value = this.value;
const sel2 = document.getElementById("myselectbox2");
if (sel2 && this.value) sel2.name="c-"+this.value;
});
// check to see the change
document.getElementById("mycheckbox1").addEventListener("change", function() {
console.log(this.value);
});
// select to see the change
document.getElementById("myselectbox2").addEventListener("change", function() {
console.log(this.name,this.value)
})
});
<input type="checkbox" name="id" value="" id="mycheckbox1">
<select name="cat-1" id="myselectbox1">
<option value="">Choose</option>
<option value="100">Value1</option>
<option value="200">Value2</option>
</select>
<select name="cat-2" id="myselectbox2">
<option value="">Choose</option>
<option value="300">Value3</option>
<option value="400">Value4</option>
</select>

Child categories of sub category not listed

There is a 3-stage category list.
Main Category
Sub Category
Child Category
Main category and subcategory are working but can not display child category. Additionally, the "choose " option does not appear in the subcategories If the relevant category is selected.
Where am I making a mistake?
$(document).ready(function() {
var $cat = $('select[name=categoMain]'),
$items = $('select[name=categoSubMain]');
$items2 = $('select[name=categoChildMain]');
$cat.change(function() {
var $this = $(this).find(':selected'),
rel = $this.attr('rel'),
$set = $items.find('option.' + rel);
if ($set.size() < 0) {
$items.hide();
return;
}
$items.show().find('option').hide();
$set.show().first().prop('selected', true);
/* Child category */
$items.change(function() {
var $this = $(this).find(':selected'),
rel = $this.attr('rel'),
$set = $items2.find('option.' + rel);
if ($set.size() < 0) {
$items2.hide();
return;
}
$items2.show().find('option').hide();
$set.show().first().prop('selected', true);
});
/* */
});
});
.cate {
display: none;
}
.cate2 {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="categoMain">
<option value="0" class="">Choose</option>
<option value="1" rel="accessories">Cellphones</option>
<option value="2" rel="sports">Sports</option>
<option value="2" rel="cars">Cars</option>
</select>
<select name="categoSubMain" class="cate">
<option value="0" class="">Choose</option>
<option value="3" class="accessories">Smartphone</option>
<option value="8" class="accessories">Charger</option>
<option value="1" class="sports">Basketball</option>
<option value="4" class="cars">Tesla</option>
</select>
<select name="categoChildMain" class="cate2">
<option value="0" class="">Choose</option>
<option value="3" class="accessories">Smartphone</option>
<option value="1" class="sports">Basketball</option>
</select>
JSFiddle Version
Changed your code a bit. It does what you wanted but now you are facing another problem - what if you have one option? Give me time, i will come up with something
$(document).ready(function () {
var selectedData = {}
$('select[name="categoMain"], select[name="categoSubMain"],select[name="categoChildMain"]').change(function () {
var $this = $(this).find(':selected');
selectedData[$(this).attr('name')]=$this.val()
var rel = $this.data('rel');
$(this).next('select').show()
.find('option').hide()
.end().find('option[data-rel="' + rel+'"]').show()
.first().prop('selected', true);
$(this).next('select').next('select').hide()
console.log(selectedData);
});
});
.cate {
display: none;
}
.cate2 {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="categoMain">
<option value="0" data-rel="">Choose</option>
<option value="1" data-rel="accessories">Cellphones</option>
<option value="2" data-rel="sports">Sports</option>
<option value="2" data-rel="cars">Cars</option>
</select>
<select name="categoSubMain" class="cate">
<option value="0" data-rel="">Choose</option>
<option value="3" data-rel="accessories">Smartphone</option>
<option value="8" data-rel="accessories">Charger</option>
<option value="1" data-rel="sports">Basketball</option>
<option value="4" data-rel="cars">Tesla</option>
</select>
<select name="categoChildMain" class="cate2">
<option value="0" data-rel="">Choose</option>
<option value="3" data-rel="accessories">Smartphone</option>
<option value="1" data-rel="sports">Basketball</option>
</select>

Calculating price of multiple items

Currently I have a HTML form allows a person to select an item from a dropdown and it will put the price in an input and even change the price if the quantity is changed.
How can I make it so that when I add "multiple" inside the select tag (making it <select id="price_input" multiple>), it will calculate the price for the two or more items and if two or more are selected have the quantity dropdown disabled?
This is what I've been able to come up with but it doesn't have the additions described above that I am in need of:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#price_input').on('change', function() {
$selection = $(this).find(':selected');
$('#opt_price').val($selection.data('price'));
$('#quantity_input').on('change', function() {
$('#opt_price').val($selection.data('price') * $(this).val());
});
});
});
</script>
<select id="price_input">
<option value="Coffee" data-price="3.00">Coffee</option>
<option value="Chips" data-price="0.75">Chips</option>
<option value="Soda" data-price="2.50">Soda</option>
</select>
<select id="quantity_input">
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
</select>
<div>Option Price <input type="text" id="opt_price"/></div>
Using the following you can make it work for multiple products.
$(document).ready(function() {
$('#price_input').on('change', function() {
$('#opt_price').val(valueFUnction());
});
$('#quantity_input').on('change', function() {
$('#opt_price').val(valueFUnction());
});
});
function valueFUnction(quan) {
var $selection = $('#price_input').find(':selected');
var quantity = $('#quantity_input').val();
var total = 0;
$selection.each(function() {
total += $(this).data('price') * quantity;
})
return total;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="price_input" multiple>
<option value="Coffee" data-price="3.00">Coffee</option>
<option value="Chips" data-price="0.75">Chips</option>
<option value="Soda" data-price="2.50">Soda</option>
</select>
<select id="quantity_input">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div>Option Price
<input type="text" id="opt_price" />
</div>
You can check if more then one option is selected with $(":selected", this).length > 1) and then change disabled of $('#quantity_input')
$('select').on('change', function() {
if ($(":selected", this).length > 1) {
$('#quantity_input').prop('disabled', true);
} else {
$('#quantity_input').prop('disabled', false)
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="price_input" multiple>
<option value="Coffee" data-price="3.00">Coffee</option>
<option value="Chips" data-price="0.75">Chips</option>
<option value="Soda" data-price="2.50">Soda</option>
</select>
<select id="quantity_input">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div>Option Price
<input type="text" id="opt_price" />
</div>
Try the following optimized version:
$('#price_input').on('change', function() {
var items = $(this).val() || [], totalPrice = 0.00;
$('#quantity_input').attr('disabled', items.length > 1);
var selection = $(':selected', this);
if (selection.length) {
$.each(selection, function(i, v){
totalPrice += parseFloat($(v).data('price'));
});
}
$('#opt_price').val(totalPrice);
});
$('#quantity_input').on('change', function() {
$('#opt_price').val($('#price_input :selected').data('price') * $(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select id="price_input" multiple>
<option value="Coffee" data-price="3.00">Coffee</option>
<option value="Chips" data-price="0.75">Chips</option>
<option value="Soda" data-price="2.50">Soda</option>
</select>
<select id="quantity_input">
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
</select>
<div>Option Price <input type="text" id="opt_price"/></div>

how to get both values call in function javascript

please check my code i tried to get both values from different drop down menus.
<select name="select1" onchange="updatevariable(data1,select2)">
<option value="2" >2</option>
<option value="15" >15</option>
</select>
<select name="select2" onchange="updatevariable(select1,data2)">
<option value="1" >1</option>
<option value="23" >23</option>
</select>
<script type="text/javascript">
var value = "test";
var value1 = "test";
function updatevariable(data1,data2) {
value = data1;
value1 = data2;
alert(value,value1);
}
</script>
thanks
Try this:
Explanation:
What you have is called inline script, it should be avoided. You could replace all your code with this under instead. In your html what you want to do doesn't work that way. updatevariable(data1,select2) does not get the variable or the select element. So try my solution instead.
var value = "test";
var value1 = "test";
var sel = document.getElementsByTagName('select');
function updatevariable() {
value = sel[0].value;
value1 = sel[1].value;
alert(value +' - '+ value1);
}
for (var i = 0; i < sel.length; i++) {
sel[i].addEventListener('change', updatevariable);
};
Example
You could also use jQuery or Mootools if you have much code to write. Otherwise just plain JS is good also...
You're referencing JS variables that don't exist: data1, data2, select, select2
You don't need to pass any variables into the function. Try this instead:
Updated HTML with id specified on each select
<select id="select1" name="select1" onchange="updatevariable(this)">
<option value="2" >2</option>
<option value="15" >15</option>
</select>
<select id="select2" name="select2" onchange="updatevariable(this)">
<option value="1" >1</option>
<option value="23" >23</option>
</select>
And your JS function:
window.updatevariable = function(el) {
value = document.getElementById('select1').value;
value1 = document.getElementById('select2').value;
alert(value +' | ' + value1);
}
Live Example
Try this one:
<select name="select1" id="select1" onchange="updatevariable(1,select1)">
<option value="2" >2</option>
<option value="15" >15</option>
</select>
<select name="select2" id="select2" onchange="updatevariable(2,select2)">
<option value="1" >1</option>
<option value="23" >23</option>
</select>
<script type="text/javascript">
var values = new Array();
function updatevariable(index,id) {
var value = document.getElementById(id).value;
values[index] = value;
}
</script>

jQuery remove SELECT options based on another SELECT selected (Need support for all browsers)

Say I have this dropdown:
<select id="theOptions1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
I want it so that when the user selects 1, this is the thing that the user can choose for dropdown 2:
<select id="theOptions2">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
Or if the user selects 2:
<select id="theOptions2">
<option value="a">a</option>
<option value="b">b</option>
</select>
Or if the user selects 3:
<select id="theOptions2">
<option value="b">b</option>
<option value="c">c</option>
</select>
I tried the code posted here:
jQuery disable SELECT options based on Radio selected (Need support for all browsers)
But it doesn't work for selects.
Please help!
Thank you!
UPDATE:
I really like the answer Paolo Bergantino had on:
jQuery disable SELECT options based on Radio selected (Need support for all browsers)
Is there anyway to modify this to work with selects instead of radio buttons?
jQuery.fn.filterOn = function(radio, values) {
return this.each(function() {
var select = this;
var options = [];
$(select).find('option').each(function() {
options.push({value: $(this).val(), text: $(this).text()});
});
$(select).data('options', options);
$(radio).click(function() {
var options = $(select).empty().data('options');
var haystack = values[$(this).attr('id')];
$.each(options, function(i) {
var option = options[i];
if($.inArray(option.value, haystack) !== -1) {
$(select).append(
$('<option>').text(option.text).val(option.value)
);
}
});
});
});
};
This works (tested in Safari 4.0.1, FF 3.0.13):
$(document).ready(function() {
//copy the second select, so we can easily reset it
var selectClone = $('#theOptions2').clone();
$('#theOptions1').change(function() {
var val = parseInt($(this).val());
//reset the second select on each change
$('#theOptions2').html(selectClone.html())
switch(val) {
//if 2 is selected remove C
case 2 : $('#theOptions2').find('option:contains(c)').remove();break;
//if 3 is selected remove A
case 3 : $('#theOptions2').find('option:contains(a)').remove();break;
}
});
});
And the beautiful UI:
<select id="theOptions1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br />
<select id="theOptions2">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
You can add classes to your <option>s to store which go with each value of #theOptions1:
<select id="theOptions2">
<option value="a" class="option-1 option-2">a</option>
<option value="b" class="option-1 option-2 option-3">b</option>
<option value="c" class="option-1 option-3">c</option>
</select>
then do this:
$(function() {
var allOptions = $('#theOptions2 option').clone();
$('#theOptions1').change(function() {
var val = $(this).val();
$('#theOptions2').html(allOptions.filter('.option-' + val));
});
});
For the record you can NOT remove options in a select list in Internet Explorer.
try this. this will definitely work
$(document).ready(function () {
var oldValue;
var oldText;
var className = '.ddl';
$(className)
.focus(function () {
oldValue = this.value;
oldText = $(this).find('option:selected').text();
})
.change(function () {
var newSelectedValue = $(this).val();
if (newSelectedValue != "") {
$('.ddl').not(this).find('option[value="' + newSelectedValue + '"]').remove();
}
if ($(className).not(this).find('option[value="' + oldValue + '"]').length == 0) { // NOT EXIST
$(className).not(this).append('<option value=' + oldValue + '>' + oldText + '</option>');
}
$(this).blur();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<form action="/Home/Ex2" method="post">
<select class="ddl" id="A1" name="A1">
<option value="">Select</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
</select>
<hr />
<select class="ddl" id="A2" name="A2">
<option value="">Select</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
</select>
<hr />
<select class="ddl" id="A3" name="A3">
<option value="">Select</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
</select>
<hr />
<select class="ddl" id="A4" name="A4">
<option value="">Select</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
</select>
<hr />
<input type="submit" name="submit" value="Save Data" id="btnSubmit" />
</form>
Actually, using the code below will remove a dropdown option just fine in IE, as long as it is not the selected option (it will not work on "a" without deselecting that option first):
var dropDownField = $('#theOptions2');
dropDownField.children('option:contains("b")').remove();
You just run this to remove whatever option you want to remove under a conditional statement with the first group (theOptions1) - that if one of those is selected, you run these lines:
var dropDownField = $('#theOptions2');
if ($('#theOptions1').val() == "2") {
dropDownField.children('option:contains("c")').remove();
}
if ($('#theOptions1').val() == "3") {
$("#theOptions2 :selected").removeAttr("selected");
$('#theOptions2').val('b');
dropDownField.children('option:contains("a")').remove();
}
-Tom

Categories

Resources