Develop Reference

2 Select Boxes - Select Box 1 (A,B,C...) fills Select Box 2, doesn't work properly

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>

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>

How to get multiple values from an HTML <select> element

How to take the values of value1 and value2 in two variables using javascript?
<select class="form-control" id="country" name="country">
<option value="**value1**" "**value2**" >Select Item</option>
</select>

You could make your own attribute. I know you probably do not want to get the element with an ID, but I don't know the context. You can just call getAttribute on the option and use any name you gave to the "custom" attribute.
window.addEventListener('load', ()=>
{
const option = document.getElementById('option');
function init()
{
//Use this to get the values
console.log(option.getAttribute('other-value'));
}
init();
});
<select class="form-control" id="country" name="country">
<option id="option" value="value1" other-value="value2">Select Item</option>
</select>

I don't know what you really want to do with your piece of code,
but here is a proper way to use the option elements, and a way to split multiple values with a fixed separator:
var example = document.getElementById('example');
example.addEventListener('change', function() {
// Console displays the “value”, and not the text, of the selected option
console.log("option value:", example.value);
});
// Here is what I'll do with your "multiple" values
var country = document.getElementById('country');
var options = country.querySelector('option');
var values = options.value.split("/");
values.forEach(function(val) {
country.innerHTML += "<option value=" + val + ">" + val + "</option>";
});
<p>My simple example</p>
<select id="example" name="country">
<option value="--">Select Country</option>
<option value="GB">Great Britain</option>
<option value="FR">France</option>
</select>
<br>
<br>
<p>Example with option getting splitted</p>
<select class="form-control" id="country" name="country">
<!-- Let's say your multiple values are separated by a "/" -->
<option value="**value1**/**value2**">Select Item</option>
</select>
Hope it helps.

$('select').on('change', function() {
console.log( $('#country').val() );
console.log($(this).find(':selected').data('second'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" id="country" name="country">
<option value="value1" data-second ="value2" >Select Item 1</option>
<option value="value3" data-second ="value4" >Select Item 2</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>

Dynamic updating of prices with multiple options

script type="text/javascript">
function updatePrice() {
var price = document.getElementById("product").value;
document.getElementById("price").innerHTML="<p>PRICE: " + price + "</p>";
}
</script>
</head>
<br>
<label >Shirt Type</label>
<body onload="updatePrice()">
<select id="product" onchange="updatePrice()">
<option id="basic" value="€20.00"> Basic Shirt (€20.00)</option>
<option id="poly" value="€25.00">Poly-Cotton Blend (€25.00)</option>
<option id="gildan" value="€28.00">Gildan Cotton (€28.00)</option>
<option id="organic" value="€30.00">Organic Cotton (€30.00)</option>
</select>
<div id="price"><p>PRICE: €XX.XX</p></div>
<label >Shirt Size</label>
<select id="size" onchange="updatePrice()">
<option id="None">Choose Size</option>
<option id="Small">Small</option>
<option id="Medium">Medium</option>
<option id ="Large">Large</option>
<option id ="XL">XL</option>
<option id ="XXL"value= "€2.00">XXL</option>
<option id ="XXXL" value="€3.00">XXXL</option>
</select>
I have a site which sells t-shirts, The code above allows the price to update depending on the type of cotton selected and that works fine. I want the XXL and XXXL size shirts to cost more and for that charge to be updated in the price. How do I add the values of elements together to display one price, Thanks.

the correct code would be
<script type="text/javascript">
function updatePrice() {
var price = document.getElementById("product").value;
var size_price = document.getElementById("size").value;
var a=parseInt(price);//parsed type price
var b=parseInt(size_price);//parsed size price
if(size_price != "null")//if the value selected is not null then add the prize
{
var fin_price = a+b; //add the prices
}
else //if the value selected is null then fin_prize=price
{
var fin_price = price;
}
document.getElementById("price").innerHTML="<p>PRICE: " + fin_price + "</p>";
}
</script>
<br>
<label >Shirt Type</label>
<body onload="updatePrice()">
<select id="product" onchange="updatePrice()">
<option id="basic" value="20.00"> Basic Shirt (€20.00)</option>
<option id="poly" value="25.00">Poly-Cotton Blend (€25.00)</option>
<option id="gildan" value="28.00">Gildan Cotton (€28.00)</option>
<option id="organic" value="30.00">Organic Cotton (€30.00)</option>
</select>
<div id="price"><p>PRICE: €XX.XX</p></div>
<label >Shirt Size</label>
<select id="size" onchange="updatePrice()">
<option id="None" value="null">Choose Size</option>
<option id="Small" value="0.00">Small</option>
<option id="Medium" value="0.00">Medium</option>
<option id ="Large" value="0.00">Large</option>
<option id ="XL" value="0.00">XL</option>
<option id ="XXL"value= "2.00">XXL</option>
<option id ="XXXL" value="3.00">XXXL</option>
</select>
Note:if you want to add numbers from different value attributes then numbers with letters (ie. €20.00) is discouraged.also use the value attribute with all options of a select dropdown

Separate the formatting from the value. Use float to preserve low order positions in case you ever want to use fractional prices. Test with gildan and XXL.
(update with correction - price.toFixed(2))
Working example here
<script type="text/javascript">
function updatePrice() {
var discount = '.10';
var discountFactor = 1.0-parseFloat(discount)
var price = (parseFloat(document.getElementById("product").value) + parseFloat(document.getElementById("size").value))*discountFactor;
document.getElementById("price").innerHTML="<p>PRICE: €" + price.toFixed(2) + "</p>";
}
</script>
</head>
<br>
<label >Shirt Type</label>
<body onload="updatePrice()">
<select id="product" onchange="updatePrice()">
<option id="basic" value="20.00"> Basic Shirt (€20.00)</option>
<option id="poly" value="25.00">Poly-Cotton Blend (€25.00)</option>
<option id="gildan" value="28.30">Gildan Cotton (€28.30)</option>
<option id="organic" value="30.00">Organic Cotton (€30.00)</option>
</select>
<div id="price"><p>PRICE: €XX.XX</p></div>
<label >Shirt Size</label>
<select id="size" onchange="updatePrice()">
<option id="None" value= "0.00">Choose Size</option>
<option id="Small" value= "0.00">Small</option>
<option id="Medium" value= "0.00">Medium</option>
<option id ="Large" value= "0.00">Large</option>
<option id ="XL" value= "0.00">XL</option>
<option id ="XXL" value= "2.25">XXL</option>
<option id ="XXXL" value="3.00">XXXL</option>
</select>