We Keep Coding

Getting value from dropdown list. I am trying to get value of dropdown list using Javascript. It keep returning the value of the first option

I try to get the selected value of the dropdown. But it keeps returning the first option value although I may choose different values. Is there any error in the code that makes this error?
<select id="category" name="category">
<option disabled selected value> -- select an option -- </option>
<option value=1>Rock</option>
<option value=2>Classical</option>
<option value="Country">Country</option>
<option value="Folk">Folk</option>
<option value="EDM">EDM</option>
<option value="Heavy Metal">Heavy Metal</option>
<option value="Hip-hop">Hip-hop</option>
<option value="Jazz">Jazz</option>
<option value="Pop">Pop</option>
<option value="Popular">Popular</option>
<option value="Rap">Rap</option>
<option value="Soul">Soul</option>
</select>
function Ulog() {
var select_id = document.getElementById("category");
select_id.options[select_id.selectedIndex].value;
}

This is because you are not listening to change event
try this
const select_id = document.getElementById("category");
select_id.addEventListener('change', evt => {
console.log(select_id.selectedOptions[0].value);
});
I hope this will help

How to make one select being depending to another select?

I have two selects2: #one and #two.
one:
<select id="one">
<option value="127">Currency</option>
<option value="133">Banks</option>
<option value="134">Credits</option>
<option value="142">Pokemons</option>
</select>
two:
<select id="two">
<optgroup label="Currency">
<option value="127">KZT</option>
<option value="133">USD</option>
<option value="134">EUR</option>
<option value="142">RUB</option>
</optgroup>
<optgroup label="Games">
<option value="11">CS:GO</option>
<option value="2233">BDSM</option>
<option value="33">Work</option>
<option value="222">WOW</option>
</optgroup>
</select>
#
When I change selected item in #one I'd like to set all option groups in #two, which is not equal to #one:selected - to 'hidden'.
It works on simple selects, but because I use a select2 plugin I face a problem (items don't hide, because select2 generates his own items on change the .select).
#
This is my code:
$(".select2").on('change', function () {
var target = $("#two");
var currentSelected = $(this).find(':selected').text();
var targetOptGroups = target.find('optgroup');
$.each(targetOptGroups, function (i, value) {
if(value.label != currentSelected){
$(value).addClass('hidden');
}
else{
$(value).removeClass('hidden');
}
});
});
I want to see only 'Currency' optgroup in #two when I select 'Currency' in #one.

How can maintain as selected the second option in a drop down with random values?

I want to always maintain how to select the second option for its drop downs. The point here is that the value is random:
MyBrowser.document.getElementById("multipleCat_1").Value = "RANDOMVALUE"
How do I select the second option in a drop down menu?
HTML:
<select id="multipleCat_1">
<option value="-1">Select</option>
<option value="RANDOMVALUE">Second Option"</option>
</select>

You can use selectedIndex as below:
document.querySelectorAll('#multipleCat_1 > option')[1].value = 'Got you!';
document.getElementById('multipleCat_1').selectedIndex = 1
console.log(document.getElementById('multipleCat_1').value)
<select id="multipleCat_1">
<option value="-1">Select</option>
<option value="RANDOMVALUE">Second Option"</option>
</select>

<select id="multipleCat_1">
<option value="A">AAA</option>
<option value="B">BBB</option>
<option value="C">CCC</option>
</select>
var options = document.querySelectorAll('#multipleCat_1 > option');
document.getElementById('multipleCat_1').value = options[1].value;

Jquery function to split option list into hierarchical select

I have list that looks like this:
<select>
<option value="All" selected="selected">- Any -</option>
<option value="16">Africa</option>
<option value="17">Asia</option>
<option value="56">-China</option>
<option value="57">-Japan</option>
<option value="19">Canada</option>
<option value="20">-Alberta</option>
<option value="21">-British Columbia</option>
<option value="22">-Manitoba</option>
<option value="23">-New Brunswick</option>
<option value="24">-Newfoundland & Labrador</option>
<option value="25">-Northwest Territories</option>
<option value="26">-Nova Scotia</option>
<option value="27">-Nunavut</option>
<option value="28">-Ontario</option>
<option value="29">-Prince Edward Island</option>
<option value="30">-Quebec</option>
<option value="31">-Saskatchewan</option>
<option value="32">-Yukon</option>
<option value="33">Central & South America</option>
<option value="34">Europe</option>
<option value="35">Republic of Ireland</option>
<option value="36">United Arab Emirates</option>
<option value="37">United Kingdom</option>
<option value="38">-England</option>
<option value="39">-Northern Ireland</option>
<option value="40">-Scotland</option>
<option value="41">-Wales</option>
</select>
I can't change the HTML, but need to split the select into two selects by jQuery first the show the top level choices then for example if Canada was chosen show a second drop down with the provinces. This has to be dynamic as the underlying list might change with the time.
I understand that it would be much easier if there would be optgroups but unfortunately this is out of my control. So basicly i need to convert this simple list into hierarchical select in the browser.

You can use below query to split continents and countries select box.
NOTE - put id="select" for main select box.
$(function(){
var continent='';
$('#select option:gt(0)').each(function(){
var value = $(this).val();
//check if option text don't have '-' in it, then take it as
// continent and create a select box with same id
if($(this).text().indexOf("-")==-1 && continent!=value)
{
continent=value;
$('#select').after('<select id="'+continent+'" style="display:none" class="country"></select>');
}
else
{
//add option to the newly created select box
$('#'+continent).append($(this));
}
});
//remove all country select box which are empty
$('.country').filter(function(){
return $(this).children().length ==0;
}).remove();
//bind change event to select box to show / hide country select box
$('#select').change(function(){
$('.country').hide();
$('#'+$(this).val()).show();
});
});
DEMO

how to select a particular drop down option element

I want to use this function to work on all my drop down lists. Problem: the first drop down works okay, but hen I try select any option in the 2nd drop down selections. It places the value from the first group in the span of the second group. I want the span to have the value from its own group. I would like to use this on multiple groups.
<script>function displayResult(xspan,xselect)
{
var x=document.getElementById(xselect).selectedIndex;
alert(x);
var newTxt = document.getElementsByTagName("option")[x].value;
document.getElementById(xspan).innerHTML = newTxt;
//alert(document.getElementsByTagName("option").length);
}
</script>
<select id="myPhones" onchange="displayResult('ShowPhone','myPhones')">
<option value="">Phone Numbers</option>
<optgroup label="Shipping">
<option value=" - 800-463-3339">FedEx</option>
<option value=""></option>
</optgroup>
</select>
<span id="ShowPhone"></span>
<select id="myParts" onchange="displayResult('ShowParts','myParts')">
<option value="">Qik Parts list</option>
<optgroup label="BATT">
<option value="1">1</option>
<option value="2">1</option>
<option value="2">1</option>
<option value="2"><1/option>
</optgroup>
</select>
<span id="ShowParts"></span>

Chage the id and the displayResult of the second dropdown:
First dropdown:
<select id="myPhones" onchange="displayResult('ShowPhone','myPhones')">
Second dropdown:
<select id="NewNameID" onchange="displayResult('ShowPhone','NewNameID')">