We Keep Coding

Issue with get selected option and return

I have an issue with the return value in js. I need to return it because I wanna use it in
var rusiavimas = selectedServices();
So, my function looks like this.
function selectedServices()
{
var selectedServices = [];
$('.common_change').change(function(){
selectedServices = $(this).val();
alert(selectedServices);
});
return selectedServices;
}
My HTML code
<select name="rusiavimas" class="common_change" id="cars">
<option value="none" selected disabled hidden>
Pasirinkite variantą
</option>
<option value="naujausi">Naujausi viršuje</option>
<option value="pigiausi" >Pigiausi viršuje</option>
<option value="brangiausi">Brangiausi viršuje</option>
</select>
Then I select the option, in the alert function I get the correct value, but in my return, it's not returning it.

Your code contains a lot of problem, I try to fix them below
Your JS script is always return an empty array, because when you call the function var rusiavimas = selectedServices(); the inner .change function is not runs and not change the value of the array
var selectedServices = [];
$('.common_change').change(function(){
selectedServices.push($(this).val());
if(selectedServices.length > 0){
alert("selected service: " + selectedServices.toString());
}
console.log(selectedServices);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="rusiavimas" class="common_change" id="cars">
<option value="none" selected disabled hidden>
Pasirinkite variantą
</option>
<option value="naujausi">Naujausi viršuje</option>
<option value="pigiausi" >Pigiausi viršuje</option>
<option value="brangiausi">Brangiausi viršuje</option>
</select>

Each time after changing your array it gives to your array the last common value.
The best way as was said an comments use selectedSerices.push($(this).val());
You can also use deep copy, which is less recommended in your case selectedSerices = [...selectedSerices, $(this).val()]. I guess it will help you!

Change option values of select 2 if select 1 has a value with jquery

I require a bit of jQuery to do the following:
A user can currently select Program and/or a region.
If a user selects Program AND a Region I require the option values of the region dropdown to change to "?region=1" and "?region=2"
<select class="program" id="program">
<option value="program1.html">Program 1</option>
<option value="program2.html">Program 2</option>
</select>
<select class="region" id="region">
<option value="region1.html">Region 1</option>
<option value="region2.html">Region2</option>
</select>
Greatly appreciate the assist.
My attempt at JQuery:
$('#program').on('change', function () { if($(this).val() !="0") { } else { // no option is selected } })

You need to further extend the change event for #program and include a similar one for #region.
var programSelected = null;
var regionSelected = null;
$('#program').on('change', function(element) {
programSelected = $('#program option:selected').text();
updateRegionOptions();
});
$('#region').on('change', function(element) {
regionSelected = $('#region option:selected').text();
updateRegionOptions();
});
function updateRegionOptions() {
if(programSelected != null && regionSelected != null) {
$('#region option').each(function() {
var modifiedString = '?';
modifiedString += $(this).val().replace(/\d+/,'');
modifiedString = modifiedString.replace('.html','');
modifiedString += '=';
modifiedString += $(this).val().match(/\d+/);
$(this).val(modifiedString);
});
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="program" id="program">
<option value="" selected disabled>Select Program</option>
<option value="program1.html">Program 1</option>
<option value="program2.html">Program 2</option>
</select>
<select class="region" id="region">
<option value="" selected disabled>Select Region</option>
<option value="region1.html">Region 1</option>
<option value="region2.html">Region2</option>
</select>
Explanation of the logic above:
on('change' event for both #region and #program
Set the relevant variable programSelected or regionSelected depending on the change event
Run function updateRegionOptions();
If the variables programSelected and regionSelected both have a value
For each of the options in #region
Mutate the existing value to be of the form "?region=1" and "?region=2"
Update the value section of each of the option elements to have this value
The relevant JSFiddle for review.
If this solved your issue, please accept this answer :)

If value in select option is lower than in second select option, then change option

I want to achieve:
If I select "16" in first select box and bigger value in second, for example "17", then in second select automatically changing to "16".
Just if value in first select box is lower than second, always change to same values, for example 16 to 16, 18 to 18.
<select id="from_age_js" name="from_age" class="select-advertise-style">
<option value="f13">13</option>
<option value="f14">14</option>
<option value="f15">15</option>
<option value="f16">16</option>
<option value="f17">17</option>
<option value="f18" selected>18</option>
<option value="f19">19</option>
<option value="f20">20</option>
</select>
—
<select id="to_age_js" name="to_age" class="select-advertise-style">
<option value="t13">13</option>
<option value="t14">14</option>
<option value="t15">15</option>
<option value="t16">16</option>
<option value="t17">17</option>
<option value="t18">18</option>
<option value="t20" selected>20+</option>
</select>

That's an easy one, in your case, with pure javascript, I would do something like this:
function checkit()
{
//Store the two dropdowns for easy reference
var fromAge = document.getElementById('from_age_js');
var toAge = document.getElementById('to_age_js');
//Verify if the toAge value is minor, to see if the conditional code will be executed
if( fromAge.options[fromAge.selectedIndex].value >
toAge.options[toAge.selectedIndex].value)
{
//In that case, match the values to be the same...
document.getElementById('to_age_js').value =
fromAge.options[fromAge.selectedIndex].value;
}
}
And you just have to add that function to where you want it to be called. I would choose to add the onchange event from Javascript within the select dropdowns. Like this:
<select id="from_age_js" name="from_age" class="select-advertise-style" onchange="checkit();">
You can see a working example here:
https://jsfiddle.net/8cmad3tz/19/

Auto-select Dropdown option based on previous answer - Javascript HTML Form

First time posting so apologies if it may question is at first unclear, although I hope it's fairly straight forward. I'm new to Javascript and need some help.
WHAT I WANT TO ACHIEVE:
I have an HTML form and when someone selects a letter from the 'letter' dropdown menu in the HTML form (e.g. A, B, or C), I want the 'number' dropdown menu to change automatically based on the select in the 'letter' dropdown (e.g. if letter selected was 'A' then select '1', if 'B' then select '2' and so on.)
[[ As a bonus, it also like the 'number' dropdown to be disabled, so automatic variable generated cannot be changed by the front-end user filling out the form]]
FURTHER INFORMATION
I had seen something similar down on a form I had permission to use so I tried to ammend the code but I can't make it work. If you could provide tips on how to ammend the code or provide a new answer to my problem that would be fantastic.
MY CODE (so far...)
The Javascript Part
<html>
<head>
<?php
echo "var campus='none';";
?>
<script language ="javascript">
function changeDropdown(number) {
numberSelection = document.getElementById("number");
for (var i = 0; i < numberSelection.length; i++)
{
if (number == numberSelection[i].value)
{
numberSelection[i].selected = true;
return;
}
}
}
function load() {
if (number == 'none')
{
letterSelection = document.getElementById("letter");
if letter == letterSelection("0")
{
changeDropdown("A");
}
else if letter == letterSelection("1")
{
changeDropdown("B");
}
else if letter == letterSelection("2")
{
changeDropdown("C");
}
}
else
{
changeDropdown(number);
}
}
</script>
</head>
<body>
The Form
<form name ="form1">
<select name ="letter" onclick="load()">
<option value ="A">A
<option value ="B">B
<option value ="C">C
</option>
</select>
<br />
<select name ="number">
<option value ="1">1
<option value ="2">2
<option value ="3">3
</option>
</select>
</body>
</html>
Any clarification, just ask and I'm very happy to respond :)

change this
numberSelection = document.getElementById("number")
to this
numberSelection = $("number").val();
and
<select name ="number">
<option value ="1">1
<option value ="2">2
<option value ="3">3
</option>
</select>
to
<select name ="number">
<option value ="1">1</option>
<option value ="2">2</option>
<option value ="3">3</option>
</select>
remember, a openening tag must have a closing tag

jQuery : How to check if NO option was explicitly selected in a select box

Is it possible to detect if no option was explicitly selected in a select box?
I have tried these methods but none of them works:
<select id="mySelect">
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
</select>
Trial 1:
alert($('#select option:selected').length); // returns 1
Trial 2:
alert($('#select option[selected=selected]').length); // returns 1
Trial 3:
alert($('#select option:selected').attr('selected')); // returns 'selected'
Any ideas SO people?

Try This:
<select id="mySelect">
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
</select><input type="button" id="btncheck" value="check"/>
Use this JS:
$('#btncheck').click(function(){
if ($("#mySelect ")[0].selectedIndex <= 0) {
alert("Not selected");
}
else
alert("Selected");
});
​It will check if your dropdown was selected.
Try this fiddle: http://jsfiddle.net/aPYyt/
​Hope it helps!
PS: You will have to make first value as default value.

This is how a normal select element works: the first option is selected if no other option has selected attribute set. The simplest workaround is to add an empty option as the first option, like this:
$(function() {
console.log($("#mySelect").val());
console.log($("#mySelect").get(0).selectedIndex);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="mySelect">
<option value="">-- select an item --</option>
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
</select>
then test one of these conditions:
$("#mySelect").val() === "";
$("#mySelect").get(0).selectedIndex === 0;
$("#mySelect option:selected").index() === 0;

A select box always has a value. If you don't manually change from the default value, you still have a value. For checking for explicit changes, as you say, you could monitor change:
$('#select').change(function() { $(this).data('changed', true); });
Your condition, then, would be:
if(!!$('#select').data('changed')) { ... }
The more common way of achieving something similar would be to insert a placeholder value at the top:
<option value="0">Please select one item</option>
... and test for
$('#select').val() == '0'
If you need to find out whether the select has been changed from its original value, i.e. the above test, but making sure that the user doesn't switch back to the default, you coul simply store the original value at page load:
$('#select').data('original-value', $('#select').val());
And check for
$('#select').val() != $('#select').data('original-value');

By default whatever option comes on index 0 is considered by browser as selected. The solution to problem would be inserting a dummy option at index 0 and before form submission you can validate it using something like
if($("#selectBox option").index("option:selected")>0)
$("#myForm").submit();

var $inputs_select_options = $('option:selected');
// remove empty(first option as default , value=="" ) options:
$inputs_select_options = $inputs_select_options.filter(function() {
return this.value.length; //check by length value
});