Develop Reference

How to pass values without using onChange() in HTML but in JavaScript?

I know this is a simple question. But I couldn't find a way to overcome this issue. All I want is this. I have a drop-down created using select element & when user selecting a city from that drop-down it should be able to pass that selected value to console ( console.log() ). But I am able to pass very first selected value only. I found a way to pass values to console using onChange() with select element as following code.
HTML
<select id="comboA" onchange="getComboA(this)">
<option value="">Select combo</option>
<option value="Value1">Text1</option>
<option value="Value2">Text2</option>
<option value="Value3">Text3</option>
</select>
JS
function getComboA(selectObject) {
var value = selectObject.value;
console.log(value);
}
But in my case, the whole procedure needs to be code without using onChange() in HTML. Because I have to get user inputs from WordPress form and need to make separate JS file from the form. So, I can't add or change HTML code of the form. My code is below.
HTML code
<select name="city" class="city" id="city-selection">
<option selected="selected" value="">Select City</option>
<option value="City 1">City 1</option>
<option value="City 2">City 2</option>
<option value="City 3">City 3</option>
<option value="City 4">City 4</option>
<option value="City 5">City 5</option>
<option value="City 6">City 6</option>
<option value="City 7">City 7</option>
</select>
The JS code I used is below.
JS code
var cityVal = document.getElementById("city-selection");
var cityCon = cityVal.options[cityVal.selectedIndex].text;
console.log(cityCon);
Please help me with this issue.

const selectElement = document.querySelector('#city-selection');
const changeHandler = (ev) => {
console.log('Change!', ev.target.value);
}
selectElement.addEventListener('change', changeHandler);
<select name="city" class="city" id="city-selection">
<option selected="selected" value="">Select City</option>
<option value="City 1">City 1</option>
<option value="City 2">City 2</option>
<option value="City 3">City 3</option>
<option value="City 4">City 4</option>
<option value="City 5">City 5</option>
<option value="City 6">City 6</option>
<option value="City 7">City 7</option>
</select>

Please take a look on this fiddle:
Fiddle
const selectCites = document.getElementById("city-selection");
selectCites.addEventListener("change", function(e) {
e.preventDefault();
const { srcElement } = e;
const { selectedOptions } = srcElement;
for (let i = 0; i < selectedOptions.length; i++) {
console.log(selectedOptions[i].value);
console.log(selectedOptions[i].text);
}
})
Basically I added a event listener on the select and wait for any changes and then I loop through the selectedOptions in a case you have more than one.

Just add the EventListener to listen for a change-event:
document.addEventListener("change", function() {
var cityVal = document.getElementById("city-selection");
var cityCon = cityVal.options[cityVal.selectedIndex].text;
console.log(cityCon);
}

You can register an external event listener to respond to the change event like this:
document.querySelector('select[name="city"]').addEventListener('change',function(e){
console.log( 'value: %s - Text: %s',this.value, this.options[ this.options.selectedIndex ].text )
});
<select name="city" class="city" id="city-selection">
<option selected="selected" value="">Select City</option>
<option value="City 1">City 1</option>
<option value="City 2">City 2</option>
<option value="City 3">City 3</option>
<option value="City 4">City 4</option>
<option value="City 5">City 5</option>
<option value="City 6">City 6</option>
<option value="City 7">City 7</option>
</select>

you cant use target property. like this :
const myCombo = document.getELementByID("myCombo");
myCombo.addEventListener("change" , (e) => {
console.log(e.target.value)
});

Almost all the best alternatives has been given, you can either use pure javascript or jquery
Say this is your HTML codes for Cities in Tanzania:
<select name="city" class="city" id="city-selection">
<option selected="selected" value="">Select City</option>
<option value="dar">Dar es Salaam </option>
<option value="mbeya">Mbeya</option>
<option value="mwanza">Mwanza</option>
<option value="dodoma">Dodoma</option>
<option value="arusha">Arusha</option>
<option value="morogoro">Morogoro</option>
<option value="tanga">Tanga</option>
<option value="zanzibar">Zanzibar City</option>
<option value="kigoma">Kigoma</option>
</select>
So your pure javascript can be:
document.getElementById('city-selection').addEventListener('change', function() {
let selectedCity = this.value;
console.log(selectedCity);
});
Jquery:
$('#city-selection').on('change', function() {
let selectedCity = $(this).val();
//let selectedCity = this.value; this will also do the same
//as the above declaration format
console.log(selectedCity);
});
I hope this can be of help to you

How to find parent optgroup to selected option

I have the following selection box (multiple selection) in HTML.
<select class="selectpicker form-control" id="dhsSelect" multiple data-selected-text-format="count"
title="Selected All..." name="dhsSelect">
<optgroup data-max-options="1" id="top">
<option value="T5">Top 5</option>
<option value="T10">Top 10</option>
<option value="T20">Top 20</option>
</optgroup>
<optgroup id="filter">
<option value="1">< 10</option>
<option value="2">10 - 20</option>
<option value="3">≥ 20</option>
</optgroup>
</select>
And the following JS file
$("#dhsSelect").change(function() {
// if any item in the top optgroup (id='top') is being selected, do something
// if any item in the second optgroup (id='bottom') is bring selected, do something
});
I am trying to work on the if condition. Any help would be appreciated.

You mean something like this?
Change map to forEach and return to your function and remove the console log - I’m just giving you the tools, the lack of details in your question results in lack of details in my answer
$("#dhsSelect").on("change", function() {
console.log(
$("option", this).map(function() {
if (this.selected) return this.value + " " + this.closest("optgroup").id
}).get()
)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="selectpicker form-control" id="dhsSelect" multiple data-selected-text-format="count" title="Selected All..." name="dhsSelect">
<optgroup data-max-options="1" id="top">
<option value="T5">Top 5</option>
<option value="T10">Top 10</option>
<option value="T20">Top 20</option>
</optgroup>
<optgroup id="filter">
<option value="1">< 10</option>
<option value="2">10 - 20</option>
<option value="3">≥ 20</option>
</optgroup>
</select>

Here is an easy way:
$(function(){ // load
var dhsSelect = $('#dhsSelect');
dhsSelect.on('change', function(){
console.clear(); // remove upon deployment
dhsSelect.find(':selected').each(function(){
var p = $(this).parent();
// just showing we got the correct parent
console.log(p.attr('id'))
});
});
}); // end load
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="selectpicker form-control" id="dhsSelect" multiple data-selected-text-format="count"
title="Selected All..." name="dhsSelect">
<optgroup data-max-options="1" id="top">
<option value="T5">Top 5</option>
<option value="T10">Top 10</option>
<option value="T20">Top 20</option>
</optgroup>
<optgroup id="filter">
<option value="1">< 10</option>
<option value="2">10 - 20</option>
<option value="3">≥ 20</option>
</optgroup>
</select>

Disable certain options in a drop down select

Need to disable option "5" & "6" when the option value "2" is selected. It should display all the options in the List_2 when option "1" is selected. How can I do that using jQuery or any other method.
if ($('option[value=2]').prop('selected', true)) {
$('option[value=5]').prop('disabled', true);
}
<HTML>
<body>
<select id= "List_1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<select id= "List_2">
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</body>
</HTML>

Here you go with a solution https://jsfiddle.net/eurbvzk1/
var disabledDic = {
"1" : ["6"],
"2" : ["4", "5"],
"3" : []
}
$('select#list_1').on('change', function(){
$('select#list_2 option').each(function(){
$(this).removeAttr('disabled');
});
var disableOption = disabledDic[$(this).val()];
$.each( disableOption, function(i){
$('option[value="' + disableOption[i] + '"]').prop('disabled', 'disabled');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="list_1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 2</option>
</select>
<select id= "list_2">
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
Create a dictionary that will contain each first select option as key & value will be list of disabled options from second list.
Onchange method check the dictionary & loop through the disabled value.
Hope this will help you.

With plain JS:
document.getElementById('List_1').onchange = function() {
document.getElementById('List_2')[1].disabled = (document.getElementById('List_1').selectedIndex == 1);
document.getElementById('List_2')[2].disabled = (document.getElementById('List_1').selectedIndex == 1);
}
<select id="List_1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<select id="List_2">
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>

How to change the setected default value in a 2nd drop down list

I have two drop down list "optionone" and "optiontwo" and I want to change the default selected value from "option value=3>3" to option value=3 selected>3 when 2 is selected from my first dropdown list ("optionone")
<script>
function myFunction() {
var mylist = document.getElementById("optionone");
var myvalue = mylist.options[mylist.selectedIndex].value
if (myvalue == 2) {
//do stuff
document.getElementById("optiontwo")
//Change <option value=3>3 to <option value=3 selected>3
}
}
</script>
My drop down list
<select name="optionone" onchange="myFunction()">
<option value=1>1
<option value=2>2
<option value=3>3
<option value=4>4
<option value=5>5
<option value=6>6
</select>
<select name="optiontwo">
<option value=1>1
<option value=2>2
<option value=3>3
<option value=4>4
<option value=5>5
<option value=6>6
</select>
Which I want to change to the following when 2 is select from my first drop down list (optionone)
<select name="optiontwo">
<option value=1>1
<option value=2>2
<option value=3 selected>3
<option value=4>4
<option value=5>5
<option value=6>6
</select>
I'm a bit stuck

You have a invalid markup, <option> must be closed
There is no id attribute for second select input
You can set the value attribute instead of finding the option value using index.
value should be wrapped in quote
Instead of playing with selected attribute, setting the value will make option selected.
Instead of inline-event-binding, use addEventListener
/*
function myFunction(elem) {
document.getElementById("optiontwo").value = elem.value;
}
*/
document.getElementById('optionone').addEventListener('change', function() {
document.getElementById("optiontwo").value = this.value;
});
<select name="optionone" id="optionone" onchange="myFunction(this)">
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
</select>
<select name="optiontwo" id='optiontwo'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
</select>

Thanks to the above I adapted Rayon's script to update as I wanted, as follows
<script>
document.getElementById('optionone').addEventListener('change', function() {
if (this.value == 2){
document.getElementById("optiontwo").value = 3;
}
});
</script>

remove onChange="" from html
And update you code or markup like this ..
<select name="optionone" id="optionone">
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
</select>
<select name="optiontwo" id='optiontwo'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
</select>
and then add this javascript code
document.getElementById('optionone').addEventListener('change',
function() {
if(this.value == 2){
document.getElementById("optiontwo").value = 3;
}
});
and your problem will solve

Hiding the currently selected option

I am surrently having an issue using JQuery. I have 2 select fields.
<select id="cat" name="cat_id">
<option value="2">Cat 2</option>
<option value="3">Cat 3</option>
<option value="4">Cat 4</option>
</select>
<select id="subcat" name="subcat_id">
<option class="subcats cat_2" value="1">Subcat 1</option>
<option class="subcats cat_2" value="2">Subcat 2</option>
<option class="subcats cat_3" value="3">Subcat 3</option>
<option class="subcats cat_3" value="4">Subcat 4</option>
<option class="subcats cat_3" value="5">Subcat 5</option>
<option class="subcats cat_0" value="0">No subcats for this cat</option>
</select>
And here is my JavaScript code
<script type="text/javascript">
var curval = $("#cat").val();
$(".subcats").hide(0);
$(".cat_"+curval).show(0);
$("#cat").change(function(){
var cat = $(this).val();
$(".subcats").removeAttr("selected").hide(0);
if($(".cat_"+cat).length == 0){$(".cat_0").show(0);}
else{$(".cat_"+cat).show(0);}
});
</script>
Here is the problem. When I change the value of the cats select, the options for the subcats are changed correctly. However, the currently selected field is still showing (Even if it doesn't correspond to the current cat).
Any help would be greatly appreciated.

You should change your code a little bit so on the hange event it can add the selected attribute to the first element in the available options :)
var curval = $("#cat").val();
$(".subcats").hide(0);
$(".cat_" + curval).show(0);
$("#cat").change(function() {
var cat = $(this).val();
$(".subcats").removeAttr("selected").hide(0);
if ($(".cat_" + cat).length == 0) {
$(".cat_0").attr("selected", "selected").show(0);
} else {
$(".cat_" + cat).eq(0).attr("selected", "selected");
$(".cat_" + cat).show(0);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="cat" name="cat_id">
<option value="2">Cat 2</option>
<option value="3">Cat 3</option>
<option value="4">Cat 4</option>
</select>
<select id="subcat" name="subcat_id">
<option class="subcats cat_2" value="1">Subcat 1</option>
<option class="subcats cat_2" value="2">Subcat 2</option>
<option class="subcats cat_3" value="3">Subcat 3</option>
<option class="subcats cat_3" value="4">Subcat 4</option>
<option class="subcats cat_3" value="5">Subcat 5</option>
<option class="subcats cat_0" value="0">No subcats for this cat</option>
</select>