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>
Related
I would like to have the output in select box 2 in such a way that if I choose something with B in select box 1, everything that begins with B in select box 1 is output. At the moment only one is issued and the others are not
$('#select1').on('change', () => {
$('#select2 option').hide();
$('#select2 option[value^="' + $('#select1').val() + '" ]').show();
}).trigger('change');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="standard" size="1" id="select1">
<option value="0">A</option>
<option value="1">B</option>
<option value="2">C</option>
<option value="3">D</option>
<option value="4">E</option>
<option value="5">F</option>
<option value="6">G</option>
<option value="7">H</option>
<option value="8">I</option>
<option value="9">J</option>
<option value="10">K</option>
<option value="11">L</option>
<option value="12">M</option>
</select>
<select name="standard" size="1" id="select2">
<option value="0" style="">Aal in Aspik</option>
<option value="1" style="display: none;">Bierwurst</option>
<option value="2" style="display: none;">Berliner (Faschingskrapfen)</option>
<option value="3" style="display: none;">Auberginenröllchen auf Tomaten-Zimt-Sugo</option>
</select>
Since your selector #select2 option[value^="' + $('#select1').val() + '" ] will only match one options, so the other options that have greater value still not be showed. You could try to use jQuery's filter
$('#select1').on('change', () => {
var value1 = $('#select1').val();
var option2 = $('#select2 option');
$('#select2').val(value1).change();
option2.hide();
option2.filter(function() {
return parseInt($(this).val()) >= parseInt(value1);
}).show();
}).trigger('change');
See demo here
Your issue is here:
[value^="' + $('#select1').val() + '" ]
If you debug select val, you'll see it's 1 for B as it takes the option value:
<option value="1">B</option>
To compare texts, you need to get the text of the current selected option, eg:
$('#select1 option:selected').text()
you can then use .filter to compare this with the first letter of each option in the second select:
$('#select2 option').filter((i,e)=> $(e).text().substr(0,1) == $('#select1 option:selected').text()).show();
Updated snippet:
$('#select1').on('change', () => {
$('#select2 option').hide();
$('#select2 option').filter((i,e)=> $(e).text().substr(0,1) == $('#select1 option:selected').text()).show();
}).trigger('change');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="standard" size="1" id="select1">
<option value="0">A</option>
<option value="1">B</option>
<option value="2">C</option>
<option value="3">D</option>
<option value="4">E</option>
<option value="5">F</option>
<option value="6">G</option>
<option value="7">H</option>
<option value="8">I</option>
<option value="9">J</option>
<option value="10">K</option>
<option value="11">L</option>
<option value="12">M</option>
</select>
<select name="standard" size="1" id="select2">
<option value="0" style="">Aal in Aspik</option>
<option value="1" style="display: none;">Bierwurst</option>
<option value="2" style="display: none;">Berliner (Faschingskrapfen)</option>
<option value="3" style="display: none;">Auberginenröllchen auf Tomaten-Zimt-Sugo</option>
</select>
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>
I have a form, and I'm trying to disable or hide options in a select form element which have a particular data-id attribute. Example form:
<fieldset id="fuu">
<select name="bar1">
<option value="option1" data-id="available">Option 1</option>
<option value="option2" data-id="notAvailable">Option 2</option>
<option value="option3" data-id="available">Option 3</option>
</select>
<select name="bar2">
<option value="anotherOption1" data-id="available">Option 1</option>
<option value="anotherOption2" data-id="notAvailable">Option 2</option>
<option value="anotherOption3" data-id="available">Option 3</option>
</select>
</fieldset>
I would like to hide (and disable for browsers which don't support hiding) the options with data-id of "notAvailable".
Here is what I've tried:
<script>
$(document).ready(function () {
//hide unavailable options
var unavailable = notAvailable;
$('#fuu select option').each(function (event) {
if ($(this).attr("data-id") !== unavailable) {
$(this).hide().prop('disabled', true);
}
});
});
</script>
My selector seems to fail, because when I the below code to log the result, I get "notAvailable : undefined" 127 times (one for each option in my form)
<script>
$(document).ready(function () {
//test by logging
var unavailable = notAvailable;
$('#fuu select option').each(function (event) {
if ($(this).attr("data-id") !== unavailable) {
var loggedID = $(this).attr("data-id");
console.log(unavailable + " : " + loggedID);
}
});
});
</script>
Thank you for your help!
Try following code:
$("#fuu select option[data-id='notAvailable']").hide().prop('disabled', true);
Try This :
$(document).ready(function(){
$('select option').each(function(){
if($(this).attr('data-id')=='notAvailable'){
$(this).prop('disabled',true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset id="fuu">
<select name="bar1">
<option value="option1" data-id="available">Option 1</option>
<option value="option2" data-id="notAvailable">Option 2</option>
<option value="option3" data-id="available">Option 3</option>
<select>
<select name="bar2">
<option value="anotherOption1" data-id="available">Option 1</option>
<option value="anotherOption2" data-id="notAvailable">Option 2</option>
<option value="anotherOption3" data-id="available">Option 3</option>
</select>
Provide this under quotes var unavailable = "notAvailable";
Change the condition as $(this).attr("data-id") == unavailable
Example:
$(document).ready(function() {
//hide unavailable options
var unavailable = "notAvailable";
$('#fuu select option').each(function(event) {
if ($(this).attr("data-id") == unavailable) {
$(this).hide().prop('disabled', true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset id="fuu">
<select name="bar1">
<option value="option1" data-id="available">Option 1</option>
<option value="option2" data-id="notAvailable">Option 2</option>
<option value="option3" data-id="available">Option 3</option>
</select>
<select name="bar2">
<option value="anotherOption1" data-id="available">Option 1</option>
<option value="anotherOption2" data-id="notAvailable">Option 2</option>
<option value="anotherOption3" data-id="available">Option 3</option>
</select>
</fieldset>
How to sum the selection options in multiple attribute? Any idea what might be the problem?
$(document).ready(function() { $('#btn-add').click(function(){
$('#select-from option:selected').each( function() {
$('#select-to').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
$(this).remove();
});
});
$('#btn-remove').click(function(){
$('#select-to option:selected').each( function() {
$('#select-from').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
$(this).remove();
});
});
$('.select-from option:selected').change(function() {
var total = 0 ;
$('.select-to option:selected').each(function() {
total += parseInt($(this).value());
});
$("input[name=class]").value(total); }); });
I have a multiple selection list options
<select name="selectfrom" id="select-from" multiple size="5">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
<option value="4">Item 4</option>
</select>
Add »
« Remove
<select name="selectto" id="select-to" multiple size="5">
</select> <input type="text" name="class" value="" />
Try following code.
$(document).ready(function() {
$('#btn-add').click(function(){
$('#select-from option:selected').each( function() {
$('#select-to').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
$("input[name='class']").val(parseInt($(this).val()) + parseInt($("input[name='class']").val()));
});
});
$('#btn-remove').click(function(){
$('#select-to option:selected').each( function() {
$('#select-from').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
$(this).remove();
$("input[name='class']").val(parseInt($("input[name='class']").val() - parseInt($(this).val())));
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="selectfrom" id="select-from" multiple size="5">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
<option value="4">Item 4</option>
</select>
Add »
« Remove
<select name="selectto" id="select-to" multiple size="5">
</select> <input type="text" name="class" value="0" />
You are using .value() instead of .val()
Change total += parseInt($(this).value()); to total += parseInt($(this).val()); and $("input[name=class]").value(total); to $("input[name=class]").val(total);
I have a web page for employees where they can choose an item from a dropdown and it will automatically input the price of that item for them. Here is my code:
<script>
$(document).ready(function() {
$('#price_input').on('change', function() {
$selection = $(this).find(':selected');
$('#opt_value').val($selection.val());
$('#opt_price').val($selection.data('price'));
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></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>
<div>Option Value <input type="text" id="opt_value"/></div>
<div>Option Price <input type="text" id="opt_price"/></div>
The code works properly, but how would I be able to add a quantity input that defaults to 1 and when it is changed to two, the price doubles, and when it is changed to three the price triples in the "Option Price" input for example.
<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_value').val($selection.val());
$('#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 Value <input type="text" id="opt_value"/></div>
<div>Option Price <input type="text" id="opt_price"/></div>
Calculation works on change, as for default values and monitoring both you can figure that part out. on change for the quantity dropdown functions so that should get you started.
var select = $("#opt");
var price = $("input#opt_price");
var quantity = $("input#opt_quantity");
var onChangeSelect = function() {
price.val(select.children(":selected").data('price'));
quantity.val(1);
}
select.on('change', onChangeSelect);
quantity.on('change', function() {
price.val(select.children(':selected').data('price') * $(this).val());
});
onChangeSelect();
updated