Develop Reference

Select selected option by class name

I have 2 select boxes where first is all user selectable but in second selected option is dependant on first select box. Selected value in first option box matches option's class in second select box but values are different. I imagine i need something like:
$('#territory').change(function() {
if($(this).val() == 'EU')
{
$('#territory2').class('EU');
}
How do i select selected option by class name? (There might be more than 1 option with the same class name but it just needs to select any of them).
<select id="territory" name="territory"">
<option value="EU">A</option>
<option value="GB">B</option>
<option value="ALL">C</option>
</select>
<select id="territory2" name="territory2">
<option value="1" class="EU">A</option>
<option value="2" class="GB">B</option>
<option value="3" class="ALL">C</option>
<option value="4" class="ALL">D</option>
</select>

Set the value attribute of the desired <option> element on the value attribute of the <select>:
const territory = document.getElementById("territory"),
territory2 = document.getElementById("territory2");
territory.addEventListener("input", ev => {
territory2.querySelector("."+territory.value).selected = true;
});
<select id="territory" name="territory">
<option value="EU">A</option>
<option value="GB">B</option>
<option value="ALL">C</option>
</select>
<select id="territory2" name="territory2">
<option value="1" class="EU">A</option>
<option value="2" class="GB">B</option>
<option value="3" class="ALL">C</option>
<option value="4" class="ALL">D</option>
</select>
Note that this will only select the first option with that class.

I recommend data-attribute:
$('#territory').on("change", function() {
const territory = $("option:selected", this).data("territory");
$("#territory2").val(territory)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="territory" name="territory">
<option value="" data-territory="0">Please select</option>
<option value="EU" data-territory="1">A</option>
<option value="GB" data-territory="2">B</option>
<option value="ALL" data-territory="3">C</option>
</select>
<select id="territory2" name="territory2">
<option value="0">Please select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

Custom html validation for select

I have a select element like this:
<select name="select">
<option value="opt1">Select One Value Only</option>
<option value="opt2">Type 2</option>
<option value="opt3">Type 3</option>
</select>
and I want user to select a option e.g. opt2, opt3... but opt1,
how to to use html 5 validation to valid the select?

I think the only way to add the validation here is to set the default option value to an empty string and add required attribute to select element. Now you can click on submit button to see the validation:
<form>
<label >Choose an option:</label>
<select name="select" required>
<option value="" disabled selected>Select One Value Only</option>
<option value="opt2">Type 2</option>
<option value="opt3">Type 3</option>
</select>
<input type="submit">
</form>
The issue here is that when you set a value to the default option to something other than empty string the validation infers it as a valid value has been already selected, thus the validation is not triggered at that point.

You can do something like the following:
<select name="select">
<option value="opt1" selected disabled>Select One Value Only</option>
<option value="opt2">Type 2</option>
<option value="opt3">Type 3</option>
</select>
In the snippet above, the opt1 is selected by default. The user can only select opt2 or opt3, but once they do that then they cannot selecte opt1, hope this is the behaviour you're looking for.

Try Using:
<select name="select" required>
<option value="opt1" selected="selected" disabled>Select One Value Only</option>
<option value="opt2">Type 2</option>
<option value="opt3">Type 3</option>
</select>

How to get multiselect optgroup values based on each label on submit?

I have a select option with multiple optgroups.
I want to select multiple values from each group & get values based on the label(of optgroup) on submiting it.
HTML code is
<table>
<tr>
<td>Select</td>
<td>
<select multiple="multiple" id="multiGrpSel" ">
<optgroup label="Indutry Types" id="types">
<option value="1">Private</option>
<option value="2">Public</option>
<option value="3">Govt</option>
</optgroup>
<optgroup label="Unit Category" id="unit">
<option value="1">Micro</option>
<option value="2">Small</option>
<option value="3">Medium</option>
</optgroup>
</select>
</td>
</tr>
<tr><th align="center"> <input type="button" id="submit" class="button" value="Submit"> </th></tr>
</table>
And on submit
$("#submit").die('click').live('click',function() {
$('#multiGrpSel').find("option:selected").each(function(){
//optgroup label
console.debug('label='+$(this).parent().attr("label"));
//optgroup id
console.debug('id='+$(this).parent().attr("id"));
// values based on each group ??
id = $(this).parent().attr("id");
console.debug('value='+$('#'+id).val());
});
});
If two options from 1st & 2nd optgroups are selected, I am getting the label & id , but the value are getting as blank.
Output:
label=Unit Category
id=unit
value=
label=Unit Category
id=unit
value=
label=Industry Types
id=types
value=
label=Industry Types
id=types
value=

Actually, you already have access to the values of those selected options, but you are actually trying to get a value from the optgroup not from the option since you used the optgroup's #id to determine its value, that's why you always get a blank result for the value.
See a working code below:
$("#submit").click(function (){
$('#multiGrpSel').find("option:selected").each(function(){
//optgroup label
var label = $(this).parent().attr("label");
//optgroup id
console.log('id='+$(this).parent().attr("id"));
// values based on each group ??
id = $(this).parent().attr("id");
// gets the value
console.log("label: "+label+" value: "+$(this).val())
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple="multiple" id="multiGrpSel">
<optgroup label="Indutry Types" id="types">
<option value="1">Private</option>
<option value="2">Public</option>
<option value="3">Govt</option>
</optgroup>
<optgroup label="Unit Category" id="unit">
<option value="1">Micro</option>
<option value="2">Small</option>
<option value="3">Medium</option>
</optgroup>
</select>
<input type="button" id="submit" value="submit"/>

The value (text value) is just the text content of this.
console.debug('value=' + $(this).text());
If you want the real value (corresponding numbers) use this:
console.debug('value=' + $(this).val());

$("#submit").click(function (){
$('#multiGrpSel').find("option:selected").each(function(){
//optgroup label
var label = $(this).parent().attr("label");
//optgroup id
console.log('id='+$(this).parent().attr("id"));
// values based on each group ??
id = $(this).parent().attr("id");
// gets the value
console.log("label: "+label+" value: "+$(this).val())
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple="multiple" id="multiGrpSel">
<optgroup label="Indutry Types" id="types">
<option value="1">Private</option>
<option value="2">Public</option>
<option value="3">Govt</option>
</optgroup>
<optgroup label="Unit Category" id="unit">
<option value="1">Micro</option>
<option value="2">Small</option>
<option value="3">Medium</option>
</optgroup>
</select>
<input type="button" id="submit" value="submit"/>

Populate a select with options selected from various selects - jquery

I´m not expert with javascript & jquery, and I just googled for many days but can´t find the answer.
How can I populate a select with options selected from other selects. For this example from the 1st select I choose Manchester, from 2nd I choose Bogota and the 3rd must be populated with Manchester and Bogota:
Select One <br>
<select id="city" name="city">
<option value="0"></option>
<option value="1">Manchester</option>
<option value="2">Paris</option>
<option value="3">Madrid</option>
</select><br>
Select 2 <br>
<select id="city2" name="city2">
<option value="0"></option>
<option value="4">Bogota</option>
<option value="5">Buenos Aires</option>
<option value="6">Quito</option>
</select><br>
Select 3, populated whit the options of the previous 2 selects <br>
<select id="street" name="street">
<option value="0"></option>
<option value="1">Manchester</option>
<option value="4">Bogota</option>
</select>
Many thanks for help me.

The following jQuery will refresh the street select list any time a change is made to a select with class refresh on it.
function refreshList() {
$('#street option').remove(); //Clear the dropdown
$('#street').append('<option value="0"></option>'); //Add the blank option
$('.refresh').each(function() { //Loop through every instance of class 'refresh'
var v = $(this).val(); //Selected Value
var t = $(this).find('option[value="' + v + '"]').text(); //Selected Text
if (v != 0) { //If value isn't blank, add option to Street
$("#street").append('<option value="' + v + '">' + t + '</option>');
}
});
}
$(document).ready(function() { //When the page loads
$('.refresh').change(function() { //Initialize a click-event listener for class 'refresh'
refreshList(); //Run above function
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Select One <br>
<select id="city" name="city" class="refresh">
<option value="0"></option>
<option value="1">Manchester</option>
<option value="2">Paris</option>
<option value="3">Madrid</option>
</select><br>
Select 2 <br>
<select id="city2" name="city2" class="refresh">
<option value="0"></option>
<option value="4">Bogota</option>
<option value="5">Buenos Aires</option>
<option value="6">Quito</option>
</select><br>
Select 3, populated with the options of the previous 2 selects <br>
<select id="street" name="street">
<option value="0"></option>
<option value="1">Manchester</option>
<option value="4">Bogota</option>
</select>

$('select#city').change(function() {
var $selected = $('option:selected', this).clone()//make a copy of selected option
$('#street').append($selected)//put the selected option in the 3rd select
})
$('select#city2').change(function() {
var $selected = $('option:selected', this).clone();//make a copy of selected option
$('#street').append($selected)//put the selected option in the 3rd select
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Select One
<br>
<select id="city" name="city">
<option value="0"></option>
<option value="1">Manchester</option>
<option value="2">Paris</option>
<option value="3">Madrid</option>
</select>
<br>Select 2
<br>
<select id="city2" name="city2">
<option value="0"></option>
<option value="4">Bogota</option>
<option value="5">Buenos Aires</option>
<option value="6">Quito</option>
</select>
<br>Select 3, populated whit the options of the previous 2 selects
<br>
<select id="street" name="street">
<option value="0"></option>
</select>
Use .clone() to make a copy of selected option
Description: Create a deep copy of the set of matched elements.
Then use .append() to insert the cloned element to 3rd select
Description: Insert content, specified by the parameter, to the end of each element in the set of matched elements.

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>