We Keep Coding

Javascript Select Options all at Once

Is it possible to update all options of a <select> element at once?
Depending on a prior option selected, I would like
<select name="area" id="area" size="1" style="width: 150px"></select>
to change to (or something similar depending on the option selected):
<select name="area" id="area" size="1" style="width: 150px">
<option selected="" disabled="">Select An Area/Resource</option>
<option value="1">cafe</option>
<option value="2">lounge</option>
<option value="3" disabled="">quiet area</option>
<option value="4">tables</option>
</select>
The block of options is actually stored in a variable as you see them here:
<option selected="" disabled="">Select An Area/Resource</option><option value="1">cafe</option><option value="2">lounge</option><option value="3" disabled="">quiet area</option><option value="4">tables</option>

Sure. It's just a matter of changing the .innerHTML of the select element.
const options = '<option selected="" disabled="">Select An Area/Resource</option><option value="1">cafe</option><option value="2">lounge</option><option value="3" disabled="">quiet area</option><option value="4">tables</option>';
const list = document.querySelector("select");
document.querySelector("input").addEventListener("click", function(){
list.innerHTML = list.innerHTML === "" ? options : "";
});
<input type="checkbox">check or uncheck to change the following list.<br>
<select name="area" id="area" size="1" style="width: 150px"></select>

How can I add selected option values to a jQuery multiselect from a HTML form?

I'm using a jQuery multiselect and want to add option values to it from a form.
In the code I've constructed so far, I have "food: mac & cheese" and "supplements: vitamin e" selected. If I type in "coke" in the input field and select "drinks" from the drop down, how can I add it as "drinks: coke" into my jQuery multiselect while clearing the form (so additional text and drop down items can be added)?
edit: my question is how can i get "drinks: coke" selected so it's blue (and gray in the drop down since its selected) like "food: mac & cheese" and "supplements: vitamin e" using the HTML form? sorry if I did not explain well before.
<script src="https://cdnjs.cloudflare.com/ajax/libs/slim-select/1.26.0/slimselect.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slim-select/1.26.0/slimselect.min.css" rel="stylesheet"></link>
<select id="multiple" multiple>
<option value="value 1">drinks: lemonade</option>
<option value="value 2">food: hot dog</option>
<option value="value 3" selected>food: mac & cheese</option>
<option value="value 4">food: pizza</option>
<option value="value 8" selected>supplements: vitamin e</option>
</select>
<br><br>
<form>
<label for="fname">food name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="type">Choose a label:</label>
<select name="type" id="type">
<option value="value 5">food</option>
<option value="value 6">drinks</option>
<option value="value 25">drugs</option>
<option value="value 50">supplements</option>
</select><br><br>
<input type="submit" value="Add">
</form>
<script type="text/javascript">//<![CDATA[
new SlimSelect({
select: '#multiple'
})
//]]></script>

try this
new SlimSelect({
select: '#multiple'
});
const btnAdd = document.querySelector('input[type="submit"]');
btnAdd.addEventListener('click', function(e) {
e.preventDefault();
let input = document.querySelector('#fname');
let select = document.querySelector('#type');
let selectOptions = document.querySelectorAll('#type > option');
let selectMultiple = document.querySelector('#multiple');
// create option element
let option = document.createElement('option');
let optionContent = selectOptions[select.selectedIndex].textContent+':'+input.value;
option.value = optionContent;
option.textContent = optionContent;
// insert in select multiple
selectMultiple.appendChild(option);
// reset input and select
input.value = '';
select.selectedIndex = 0;
})

Get selected value of datalist option value using javascript

I need to add some values from a HTML5 DataList to a <select multiple> control just with Javascript. But I can't guess how to do it.
This is what I have tried:
<input id="SelectColor" type="text" list="AllColors">
<datalist id="AllColors">
<option label="Red" value="1">
<option label="Yellow" value="2">
<option label="Green" value="3">
<option label="Blue" value="4">
</datalist>
<button type="button" onclick="AddValue(document.getElementById('AllColors').value, document.getElementById('AllColors').text);">Add</button>
<select id="Colors" size="3" multiple></select>
function AddValue(Value, Text){
//Value and Text are empty!
var option=document.createElement("option");
option.value=Value;
option.text=Text;
document.getElementById('Colors').appendChild(option);
}

This should work. I have moved the value selection logic into the method itself.
You will only get the value from the input. You will need to use the value to select the label from the datalist.
function AddValue(){
const Value = document.querySelector('#SelectColor').value;
if(!Value) return;
const Text = document.querySelector('option[value="' + Value + '"]').label;
const option=document.createElement("option");
option.value=Value;
option.text=Text;
document.getElementById('Colors').appendChild(option);
}
Here is the working demo.

You can check the trimmed value of the input. If value is not empty then you can get the selected data list option by matching the value attribute with querySelector().
Try the following way:
function AddValue(el, dl){
if(el.value.trim() != ''){
var opSelected = dl.querySelector(`[value="${el.value}"]`);
var option = document.createElement("option");
option.value = opSelected.value;
option.text = opSelected.getAttribute('label');
document.getElementById('Colors').appendChild(option);
}
}
<input id="SelectColor" type="text" list="AllColors">
<datalist id="AllColors">
<option label="Red" value="1"></option>
<option label="Yellow" value="2"></option>
<option label="Green" value="3"></option>
<option label="Blue" value="4"></option>
</datalist>
<button type="button" onclick="AddValue(document.getElementById('SelectColor'), document.getElementById('AllColors'));">Add</button>
<select id="Colors" size="3" multiple></select>

To get the selected options's ID in datalist, you can use this code too.
<input id="SelectColor" type="text" list="AllColors">
<datalist id="AllColors">
<option value="Red" id=1></option>
<option value="Yellow" id=2></option>
<option value="Green" id=3></option>
<option value="Blue" id=4></option>
</datalist>
<script>
$("#SelectColor").change(function(){
var el=$("#SelectColor")[0]; //used [0] is to get HTML DOM not jquery Object
var dl=$("#AllColors")[0];
if(el.value.trim() != ''){
var opSelected = dl.querySelector(`[value="${el.value}"]`);
alert(opSelected.getAttribute('id'));
}
});
</script>

Calculating two persisted bootstrap-select values on .load

Using bootstrap-select -- I am multiplying the values of two select fields in a form, and changing the value of an input field to display the total -- after page load.
How can I have the input field stay empty when just one or neither of the select fields are selected?
Below code only works if both fields are selected.
When neither of the fields are selected, it calculates with the first values of both fields - output becomes $10.
When either one of the fields is selected, it multiplies the selected value with the first value of the non-selected field - output becomes 1 * selected value, or selected value * $10.
PS. Reason I am using .load and not .change is that the fields are persisted with garlic.js
<select class="price selectpicker form-control" id="price" name="price" title="Please choose price.." />
<option>$10</option>
<option>$20</option>
<option>$30</option>
</select>
<select class="multiply selectpicker form-control" id="multiply" name="multiply" title="Please choose multiplier.." />
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<input type="text" class="form-control" name="total" id="total" readonly="true" />
$(window).on("load", function(){
var price = parseInt($('.price').val());
var multiply = parseInt($('.multiply').val());
var total = price * multiply;
if(total === ''){
$('#total').val('');
} else {
$('#total').val('$' + total);
}
});

The problem was that the 'title' attribute of 'bootstrap-select', does not use a '0' value default option field. So the above code takes the value from the first selectable option when form is loaded.
To go around this issue:
Added the first default option with a zero value in the select tag.
Used the built in 'show.bs.select' to trigger an event when drop-down list is shown, and the built in 'refresh' method to remove it.
Complementary code:
$('.selectpicker').on('show.bs.select', function () {
$('.selectpicker').find('[value=0]').remove();
$('.selectpicker').selectpicker('refresh');
});
<select class="price selectpicker form-control" id="price" name="price" title="Please choose price.." />
<option value="0"></option>
<option value="10">$10</option>
<option value="20">$20</option>
</select>
<select class="multiply selectpicker form-control" id="multiply" name="multiply" title="Please choose multiplier.." />
<option value="0"></option>
<option value="1">1</option>
<option value="2">2</option>
</select>

I hope this will helps you
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<script src="http://garlicjs.org/garlic.js"
type="text/javascript"></script>
<form data-persist="garlic" method="POST">
<select class="price selectpicker form-control" id="price" name="price" title="Please choose price.." />
<option value="10">$10</option>
<option value="20">$20</option>
<option value="30">$30</option>
</select>
<select class="multiply selectpicker form-control" id="multiply" name="multiply" title="Please choose multiplier.." />
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="text" class="form-control" name="total" id="total" readonly="true" />
</form>
In script side
<script>
$(window).on("load", function(){
calculate();
$('.selectpicker').on('change',function(){
calculate();
})
});
function calculate()
{
var price = $('.price').val()?parseInt($('.price').val()):10;
var multiply =$('.multiply').val()? parseInt($('.multiply').val()):1;
var total = price * multiply;
if(total === ''){
$('#total').val('');
} else {
$('#total').val('$' + total);
}
}
</script>

Multiple option selects to create unique shopping cart SKU

Is there a way of inserting a string into a field, whereby the string is predetermined depending on what options are selected from two drop down menus?
This is so that a combination of two drop down menus creates a unique SKU for that product, and that string referred to as a SKU is inserted into the input value of the item_number variable and then passed to paypal during checkout.
I will use the example of selling tee-shirts. So the combinations will be black/small, black/large, white/small, & white/large. And each will have a unique SKU of TEESHIRT-BS, TEESHIRT-BL, TEESHIRT-WS & TEESHIRT-WL respectively.
Here is my HTML for the option selects, however, I think I need some JavaScript to insert the SKU into the value field.
<input type="hidden" name="on0" value="colour"><b>select colour</b></><br>
<select name="os0" >
<option value="black">black</option>
<option value="white">white</option>
</select>
<br>
<br>
<input type="hidden" name="on1" value="size"><b>select size</b></><br>
<select name="os1" >
<option value="small">small</option>
<option value="large">large</option>
</select>
<!-- SKU-->
<input type="hidden" name="item_number" value="">

Try the following:
var sizeList = document.getElementById('size');
var colorList = document.getElementById('color');
sizeList.onchange = function() {
generateSku();
};
colorList.onchange = function() {
generateSku();
};
function generateSku() {
var selectedSize = sizeList.options[sizeList.selectedIndex].text;
var selectedColor = colorList.options[colorList.selectedIndex].text;
document.getElementById('sku').value = 'TEESHIRT-' + selectedColor.charAt(0).toUpperCase() + selectedSize.charAt(0).toUpperCase();
}
generateSku();
<input type="hidden" name="on0" value="colour"><b>select colour</b></><br>
<select id="color" name="os0" >
<option value="black">black</option>
<option value="white">white</option>
</select>
<br>
<br>
<input type="hidden" name="on1" value="size"><b>select size</b></><br>
<select id="size" name="os1" >
<option value="small">small</option>
<option value="large">large</option>
</select>
<!-- SKU-->
<input id="sku" name="item_number" value="">