Develop Reference

Retrieving selected values in Materialize CSS multiple select using JavaScript

I'm using multiple select of Materialize CSS in a form to select multiple values. The UI is working fine, but I couldn't find a way to retrieve all the selected values. I used an onChange event handler to retrieve the values. However instead of an array of selected values it is returning only the first selected value in the list.
Can anybody explain how to do it using JavaScript for a simple multiple select like the one below? (Not by using jQuery)
<select id='mySelect' multiple>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>

You can get the selected in this way:
html:
<select multiple id="option-select">
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Materialize Multiple Select</label>
js
document.addEventListener("DOMContentLoaded", function () {
const selects = document.querySelector("select");
const instances = M.FormSelect.init(selects, {});
const selectOption = document.querySelector("#option-select");
selectOption.addEventListener("change", function () {
const instance = M.FormSelect.getInstance(selectOption);
const selectedValues = instance.getSelectedValues();
console.log(selectedValues);
});
});

How to use getElementByID in JavaScript to connect to my HTML drop down box?

I have a drop-down box in HTML showing three options. I am also using javaScript and want to use the getElementById tool to connect the two. However, I only have one ID for the drop-down box. How does javascript recognize that I have three different options?

There's actually a demo on w3schools.com showing exactly what you're asking. To get the number of options, you could do something like
document.getElementById("mySelect").options.length

Here is an example of how to retrieve the value of a dropdown: https://jsfiddle.net/ykcwgnm8/
You use getElementBy* functions to get the element, however value attribute denotes which item is currently selected.
HTML:
<select id="dropdown">
<option value="1">First option</option>
<option value="2">Second option</option>
<option value="3">Third option</option>
</select>
JS:
function onChangeHandler(e)
{
alert("you have selected item with value "+this.value);
}
document.getElementById("dropdown").addEventListener("change", onChangeHandler);

You can listen for change like this
var list = document.getElementById("mySelect")
list.addEventListener('change', function(e){
console.log(e.target.selectedIndex)
console.log(e.target.options[e.target.selectedIndex].text)
})
<select id="mySelect">
<option>Apple</option>
<option>Orange</option>
<option>Pineapple</option>
<option>Banana</option>
</select>

You can do something like this, here is an example:-
html
<select id="selectBox">
<option value="1">option 1</option>
<option value="2" selected="selected">option 2</option>
<option value="3">option 3</option>
</select>
js
var e = document.getElementById("selectBox");
var selectedValue = e.options[e.selectedIndex].value;
// this will give selectedValue as 2
Hope you find this useful!!

Dynamically generate a select based on another select

I am trying to generate a list of options in a select dynamically based on the selection in another select by referencing a value in an array of objects.
<select id="radar">
<option value="15">City1</option>
<option value="64">City2</option>
</select>
<select id="beam">
</select>
Objects:
var radars = {
"city1": {
"name": "city1",
"maxBeams": 16
},
"city2": {
"name": "city2",
"maxBeams": 3
}
}
When a radar option is selected for example City2, I would like to fill the beam select with an option for as many maxBeams that have thee option value and text to simply be that index number:
<select id="beam">
<option value="1">1 </option>
<option value="2">2</option>
<option value="3">3</option>
</select>
What is the simplest way to accomplish this and make it easy to update?

You really shouldn't be using javascript to dynamically generate content like this. You should be using a framework like Vue.js, React, or Angular. You can homebrew a solution directly with javascript but you're just adding to your technical debt.
You should be doing something like this:
<div vue="app">
<select v-model="city_group">
<option disabled value="">Please select one</option>
<option v-for="c in cities">{{c}}</option>
</select>
<select v-if="city_group != ''" v-model="city">
<option disabled value="">Please select one</option>
<option v-for="c in city_info[city_group]">{{c}}</option>
</select>
<h1>My city group is {{city_group}}</h1>
<h1>My city is {{city}}</h1>
</div>
Notice how the content is based on data.
https://codepen.io/Snorghma/pen/QWWjOmq
https://v2.vuejs.org/v2/guide/forms.html#Select
https://v2.vuejs.org/v2/guide/list.html

JQuery how to difference between a select option with an option selected attribute and a select without a selected value

I'm populating multiple select with a webservice.
This web service is returning the selected value.
Well, at the moment to render them, I have 2 different select
<select id='select1'>
<option value='1'>Option 1</option>
<option value='3'>Option 3</option>
</select>
<select id='select2'>
<option selected="selected" value='A'>Option A</option>
<option value='B'>Option B</option>
</select>
Well, the first select hasn't any selected attribute and the second one has it.
When I execute:
$("select1").find("option:selected").val(); //Returns 1
$("select2").find("option:selected").val(); //Returns A
How I can identify when the select has an option really selected?

Instead of using :selected which looks for the selected state, you can look for [selected], which will check for the selected attribute.
var $selectedOption = $("#select1 option[selected]");
if ($selectedOption.length) {
//option selected
console.log(selectedOption.val() + " selected.");
} else {
//no option selected
console.log("Nothing selected.");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='select1'>
<option value='1'>Option 1</option>
<option value='3'>Option 3</option>
</select>
<select id='select2'>
<option selected="selected" value='A'>Option A</option>
<option value='B'>Option B</option>
</select>

You can use the has() jQuery method to find the select that has an option with the selected attribute.
$("select").has("option[selected]")
$("#select1").has("option[selected]").val() // undefined
$("#select2").has("option[selected]").val() // "A"

Best way to alternate constraints on two dropdowns

I have two dropdown selects that have the same values. I am building a converter from the source (left) unit to the destination (right) unit . It doesn't make sense to convert to and from like units. I know how to add an event on a dropdown select to remove the selected option from the alternate box but I am unclear on writing this to produce the best UI experience. Give the following trimmed case:
<select name="srcUnit" id="srcUnit">
<option value="Unit 1">Unit 1</option>
<option value="Unit 2">Unit 2</option>
<option value="Unit 3">Unit 3</option>
</select>
<select name="dstUnit" id="dstUnit">
<option value="Unit 1">Unit 1</option>
<option value="Unit 2">Unit 2</option>
<option value="Unit 3">Unit 3</option>
</select>
What might be a best practice for approaching this? If you choose a source of "Unit 2" how should destination react, remove it? Then I need a reset button, or if you choose "Unit 2" in destination as well, bounce source to something else (that seems worse and intuitive)?
Forget about this and just validate on submit?

Check the new value on each dropdown change event.
If the value is also selected in the other dropdown, move the value of the other dropdown to next (or default) option.
To give the user a clue that he should not select the same value twice, gray out the values that are already select in the other dropdown.
I have written the code for you, here is an executable snippet:
$("#srcUnit, #dstUnit").change(function(){
/*Detect wether we have srcUnit or dstUnit */
if($(this).attr("id") == "srcUnit"){var otherUnit = "dstUnit";}
else{var otherUnit = "srcUnit";}
/*Save new Value*/
var newVal = $(this).children("option:selected" ).val();
/*Select next option in other dropdown if it's old value was selected*/
if(newVal == $("#"+otherUnit+" option:selected").val()){
$('#'+otherUnit+' option:selected').removeAttr('selected').next().attr('selected', 'selected');
}
/*Update UI*/
$('#'+otherUnit+' option').removeClass("disabled");
$('#'+otherUnit+' option[value="'+newVal+'"]').addClass("disabled");
});
.disabled {
color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="srcUnit" id="srcUnit">
<option value="Unit 1" selected>Unit 1</option>
<option value="Unit 2">Unit 2</option>
<option value="Unit 3">Unit 3</option>
</select>
<select name="dstUnit" id="dstUnit">
<option value="Unit 1" class="disabled">Unit 1</option>
<option value="Unit 2" selected>Unit 2</option>
<option value="Unit 3">Unit 3</option>
</select>
I edited my answer to better fit the question, old Answer:
Use the HTML 5 disabled attribute.
<select name="srcUnit" id="srcUnit">
<option value="Unit 1">Unit 1</option>
<option value="Unit 2" selected>Unit 2</option>
<option value="Unit 3">Unit 3</option>
</select>
<select name="dstUnit" id="dstUnit">
<option value="Unit 1">Unit 1</option>
<option value="Unit 2" disabled>Unit 2</option>
<option value="Unit 3">Unit 3</option>
</select>
Read more and try out here: http://www.w3schools.com/tags/att_option_disabled.asp
Subscribe to the onchange event of the dropdowns with javascript and toggle the attribute as needed.