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>

datalist how to tell if input is one of the options

I was wondering why why I select 2 with a select tag it returns true in the console. But Whenever I select 2 in the datalist it returns false in the console.
In short I need the datalist to return tru. I need to it be true so that when the user enters in the input I can ensure that the user has enter in a option I wanted (one of the drop down menu options )
function castvote() {
var selected = document.getElementById('vote');
console.log("Chrome" in selected);
}
<input list="vote" onchange="castvote()" id="voteInput">
<datalist id="vote" >
<option value="Chrome">
</datalist>
<label>Choose a browser from this list:
<input id = "a" list="browsers" name="myBrowser"
style="width: 400px;" onclick="test()" /></label>
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Internet Explorer">
<option value="Opera">
<option value="Safari">
<option value="Microsoft Edge">
</datalist>

You should try this.
I just put (.children) at the getElementById() to get all children of datalist and the onChange() function put at the input tag.
<input list="vote" onchange="castvote()" id="voteInput">
<datalist id="vote" >
<option value="2">
<option value="3">
<option value="4">
<option value="5">
<option value="6">
</datalist>
<script>
function castvote() {
var datalist = document.getElementById('vote').children;
console.log("2" in datalist);
}
</script>

Get data-* attribute of the selected <option>

I'm trying to get the second value of an option tag using document.get.elementbyId.
<select id="test" class="form-control">
<option value="">-- Select --</option>
<option value="1" data-doj="20-06-2011">John</option>
<option value="2" data-doj="10-05-2015">Clif</option>
<option value="3" data-doj="01-01-2008">Alexander</option>
</select>
Usually, I would use document.getElementById("test").value; to get the value of one option. What should I do if I have multiple values like in this case? document.getElementById("test").data-doj;?
Thank you.

Use HTMLSelectElement.selectedIndex
The HTMLSelectElement.selectedIndex is a long that reflects the index of the first or last selected element, depending on the value of multiple. The value -1 indicates that no element is selected.
To access data-* attributes, use dataset
Note - this in event-handler refers to the element on an event is invoked.
let select = document.getElementById("test");
select.onchange = function() {
let selectedI = this.selectedIndex;
console.log(this.options[selectedI].dataset.doj)
};
<select id="test" class="form-control">
<option value="">-- Select --</option>
<option value="1" data-doj="20-06-2011">John</option>
<option value="2" data-doj="10-05-2015">Clif</option>
<option value="3" data-doj="01-01-2008">Alexander</option>
</select>

Like this
navigate using selectedIndex
document.getElementById("test").addEventListener("change",function() {
const opt = this.options[this.selectedIndex];
console.log(opt.value,
opt.getAttribute("data-doj"), // or opt.dataset.doj
opt.text)
})
<select id="test" class="form-control">
<option value="">-- Select --</option>
<option value="1" data-doj="20-06-2011">John</option>
<option value="2" data-doj="10-05-2015">Clif</option>
<option value="3" data-doj="01-01-2008">Alexander</option>
</select>

Strangely, no one still suggested.
There's a way to access HTMLCollection of the selected options with HTMLSelecteElement.selectedOptions. If you have only one <option> selected at a time, you may simply pull its first element (with [0]).
To access data-* attribute there's a proper API, which implies .dataset['propertyname'] kind of syntax:
document.getElementById('test').addEventListener('change', function(){
const [selectedOption] = this.selectedOptions,
dataDoj = selectedOption.dataset.doj
console.log(dataDoj)
})
<select id="test" class="form-control">
<option value="">-- Select --</option>
<option value="1" data-doj="20-06-2011">John</option>
<option value="2" data-doj="10-05-2015">Clif</option>
<option value="3" data-doj="01-01-2008">Alexander</option>
</select>

Please see the working example below, How you can get value, text and custom attribute of selected option -
function trackValue(){
var element = document.getElementById("test");
var option_value = element.options[element.selectedIndex].value;
var option_text = element.options[element.selectedIndex].text;
var option_doj = element.options[element.selectedIndex].getAttribute('data-doj')
console.log('value-', option_value);
console.log('text-', option_text);
console.log('doj-', option_doj);
}
<select id="test" class="form-control" onChange="trackValue();">
<option value="">-- Select --</option>
<option value="1" data-doj="20-06-2011">John</option>
<option value="2" data-doj="10-05-2015">Clif</option>
<option value="3" data-doj="01-01-2008">Alexander</option>
</select>

Adding/Removing/Updating options from select inputs

Here is what I've started to do: http://jsfiddle.net/nd9ny/
For now it doesn't work as I want it to.
I want to update options each time when a new select input is added or an input is removed.
For example, we have our first select input with these options:
<select>
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
<option value="4"></option>
</select>
When I add new input to my page, I want my function to update all the inputs and to remove the newly selected option from them.
<select>
<option value="1" selected></option>
<option value="3"></option> // The second one is removed
<option value="4"></option>
</select>
<select>
<option value="2" selected></option> // The first one is removed
<option value="3"></option>
<option value="4"></option>
</select>
And then, If I remove the first input, the second one becomes:
<select>
<option value="1"></option>
<option value="2" selected></option>
<option value="3"></option>
<option value="4"></option>
</select>
Pure Javascript code needed.

You may try the following solution:
- CSS:
.hidden {
display: none;
}
- JS function:
function hide_selected(el) {
var index = el.selectedIndex;
// Show every options
for(var i=0; i<el.length; i++)
el[i].className="";
// Hide the selected one
el[index].className="hidden";
}
- HTML example:
<body>
<select onchange="javascript:hide_selected(this);">
<option value="1" class="hidden" selected="selected">1</option>
<option value="2" class="">2</option>
<option value="3" class="">3</option>
<option value="4" class="">4</option>
</select>
</body>
Note: This function was tested with Firefox, you may have to check if this works with other browsers.
Hope this helps

Reset value of dropdown list with radio button

I need to reset the value of a dropdown list with a radio button. So when a certain radio button is selected, it will reset a specific dropdown list to the default selected="selected" option.
How can this be done with js and css?

This should reset your dropdown to the first option.
Here's the markup
<select id=foo>
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input onclick="resetFoo();" type="radio" name="bar" value="bar">
Here's the jQuery.
function doSomething {
$("#foo option:first").attr("selected", true);
}

Say that this is the code for your first element
<select id=foo>
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
your radio button should be something like this:
<input onclick="document.getElementById('foo').value = '';" type="radio" name="bar" value="bar">
The value under the onclick event needs to be replaced with the default value for your dropdown.

document.getElementById('select').selectedIndex = 0;
<input type="radio" onchange="doSomething()" />