Develop Reference

How to write js redirect rule for a+ b to alway put a before b, even in b+a scenario?

novice here, be gentle!
I am trying to incorporate some redirect rules for the below and have hit a wall.
Basically, the user selects 2 values from 2 identical dropdowns, so can be A&B or B&A.
But if the url example.com/combo/B-A, I need it to redirect to example.com/combo/A-B
Also if I am approaching it in a horrible way, open to better suggestions.
<div id="my-menu">
<div class="wrapper menu">
<form id="form-dropdown">
<select id="my-menu-1" aria-label="Combine">
<option value="a">A</option>
<option value="b">B</option>
<option value="c" selected="selected">C</option>
<option value="d">D</option>
<option value="e">E</option>
<option value="f">F</option>
<option value="g">G</option>
<option value="h">H</option>
<option value="i">I</option>
<option value="j">J</option>
<option value="k">K</option>
<option value="l">L</option></select>
<span class="spt">+</span>
<select id="my-menu-2" aria-label="Combine">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
<option value="d" selected="selected">D</option>
<option value="e">E</option>
<option value="f">F</option>
<option value="g">G</option>
<option value="h">H</option>
<option value="i">I</option>
<option value="j">J</option>
<option value="k">K</option>
<option value="l">L</option></select>
<button type="submit" aria-label="Combine">Combine</button>
</form>
</div>
</div>
<script type='text/javascript'>
const form = document.getElementById('form-dropdown');
form.addEventListener('submit', (event) => {
// stop form submission
event.preventDefault();
// if valid, submit the form and redirect to combo page
var s1, s2 = "https://www.example.com/combo/" +
(s1 = document.getElementById('my-menu-1')).options[s1.selectedIndex].value + "-" +
(s2 = document.getElementById('my-menu-2')).options[s2.selectedIndex].value + "/";
//prevents usage of browser back button, but malfunctioning for some reason...cache?
window.location.replace(s2);
});
</script>

A "simple" sort will also do the job - provided the option-values are set in a meaningful way:
const sels=[...document.querySelectorAll("#form-dropdown select")];
sels.forEach(s=>s.addEventListener("change",ev=> console.log(sels.map(s=>s.value).sort().join("-")) ) )
<form id="form-dropdown" aria-label="combine">
<select id="my-menu-1">
<option value="a">A</option>
<option value="b">B</option>
<option value="c" selected="selected">C</option>
<option value="d">D</option>
<option value="e">E</option>
<option value="f">F</option>
<option value="g">G</option>
<option value="h">H</option>
<option value="i">I</option>
<option value="j">J</option>
<option value="k">K</option>
<option value="l">L</option>
</select>
<span class="spt">+</span>
<select id="my-menu-2" aria-label="combine">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
<option value="d" selected="selected">D</option>
<option value="e">E</option>
<option value="f">F</option>
<option value="g">G</option>
<option value="h">H</option>
<option value="i">I</option>
<option value="j">J</option>
<option value="k">K</option>
<option value="l">L</option>
</select>
</form>

Ended up figuring it out with the help of another fellow. Using the comparator function.
const comparator = (a, b) => {
const signs = ['item', 'item2', 'item 3', 'item 4', 'item 5'];
return signs.indexOf(a) - signs.indexOf(b);
};
['sign1', 'sign2'].sort(comparator).join('-');
After that its just a matter of assigning sign 1 and sign 2 to the selected values from the 2 my-menu's, attaching them to the base url.

HTML Options and Values Intechanging

I am currently trying to make a simple web application which logs to the console the values that are selected in an HTML drop-down menu. However, whenever I change my options in a different select, it ends up showing a value in the #player select. For example, if I chose Shot on Cage and clicked save, the console would show that the value to be b. If I am not explaining this thoroughly enough, please let me know, and I will try to re-explain my difficulties.
function myFunction() {
var a = document.getElementById("player").selectedIndex;
console.log(document.getElementsByTagName("option")[a].value);
var b = document.getElementById("what").selectedIndex;
console.log(document.getElementsByTagName("option")[b].value);
var c = document.getElementById("where").selectedIndex;
console.log(document.getElementsByTagName("option")[c].value);
var d = document.getElementById("when").selectedIndex;
console.log(document.getElementsByTagName("option")[d].value);
}
<select id="player">
<option value="b">B</option>
<option value="n">N</option>
<option value="a">A</option>
<option value="c">C</option>
<option value="m">M</option>
<option value="j">J</option>
<option value="ja">Ja</option>
</select>
<select id="what">
<option value="shoton">Shot on Cage</option>
<option value="shotoff">Shot off Cage</option>
<option value="goal">Goal</option>
<option value="assist">Assist</option>
<option value="block">Block</option>
<option value="steal">Steal</option>
<option value="turnover">Turnover</option>
<option value="drawn">Ejection Drawn</option>
<option value="ejected">Ejected</option>
</select>
<select id="where">
<option value="set">Set</option>
<option value="navy">Navy</option>
<option value="leftwing">1/2 side past 5</option>
<option value="rightwing">4/5 side past 5</option>
<option value="point">Point/3</option>
<option value="lefttwo">1/2 side 2 meter</option>
<option value="righttwo">4/5 side 2 meter</option>
<option value="1">6 on 5 1</option>
<option value="2">6 on 5 2</option>
<option value="3">6 on 5 3</option>
<option value="4">6 on 5 4</option>
<option value="5">6 on 5 5</option>
<option value="6">6 on 5 6</option>
</select>
<select id="when">
<option value="q1">Quarter 1</option>
<option value="q2">Quarter 2</option>
<option value="q3">Quarter 3</option>
<option value="q4">Quarter 4</option>
</select>
<button type="button" onclick="myFunction()"> Save </button>

This will work for you.
.getElementsByTagName("option") will ruin your result as it will select all the <option> tags and it post the result as one.
So try this code it will work.
function myFunction() {
var a = document.getElementById("player");
console.log(a.options[a.selectedIndex].value);
var b = document.getElementById("what");
console.log(b.options[b.selectedIndex].value);
var c = document.getElementById("where");
console.log(c.options[c.selectedIndex].value);
var d = document.getElementById("when");
console.log(d.options[d.selectedIndex].value);
}
<select id="player">
<option value="b">B</option>
<option value="n">N</option>
<option value="a">A</option>
<option value="c">C</option>
<option value="m">M</option>
<option value="j">J</option>
<option value="ja">Ja</option>
</select>
<select id="what">
<option value="shoton">Shot on Cage</option>
<option value="shotoff">Shot off Cage</option>
<option value="goal">Goal</option>
<option value="assist">Assist</option>
<option value="block">Block</option>
<option value="steal">Steal</option>
<option value="turnover">Turnover</option>
<option value="drawn">Ejection Drawn</option>
<option value="ejected">Ejected</option>
</select>
<select id="where">
<option value="set">Set</option>
<option value="navy">Navy</option>
<option value="leftwing">1/2 side past 5</option>
<option value="rightwing">4/5 side past 5</option>
<option value="point">Point/3</option>
<option value="lefttwo">1/2 side 2 meter</option>
<option value="righttwo">4/5 side 2 meter</option>
<option value="1">6 on 5 1</option>
<option value="2">6 on 5 2</option>
<option value="3">6 on 5 3</option>
<option value="4">6 on 5 4</option>
<option value="5">6 on 5 5</option>
<option value="6">6 on 5 6</option>
</select>
<select id="when">
<option value="q1">Quarter 1</option>
<option value="q2">Quarter 2</option>
<option value="q3">Quarter 3</option>
<option value="q4">Quarter 4</option>
</select>
<button type="button" onclick="myFunction()"> Save </button>
options[a.selectedIndex].value this simple will get you the value of the selected option value in the select and in javascript option in a property of select which we can combain with selectedIndex property and get you value.
Hope this was helpfull.

you have many options split into 4 selects ... document.getElementsByTagName will receive them ALL ... so using the selectedIndex is only valid for the fist select
you can use getElementsByTagName on any element - so, in this case you would use it on the select element
function myFunction() {
var a = document.getElementById("player");
console.log(a.getElementsByTagName("option")[a.selectedIndex].value);
var b = document.getElementById("what");
console.log(b.getElementsByTagName("option")[b.selectedIndex].value);
var c = document.getElementById("where");
console.log(c.getElementsByTagName("option")[c.selectedIndex].value);
var d = document.getElementById("when");
console.log(d.getElementsByTagName("option")[d.selectedIndex].value);
}
<select id="player">
<option value="b">B</option>
<option value="n">N</option>
<option value="a">A</option>
<option value="c">C</option>
<option value="m">M</option>
<option value="j">J</option>
<option value="ja">Ja</option>
</select>
<select id="what">
<option value="shoton">Shot on Cage</option>
<option value="shotoff">Shot off Cage</option>
<option value="goal">Goal</option>
<option value="assist">Assist</option>
<option value="block">Block</option>
<option value="steal">Steal</option>
<option value="turnover">Turnover</option>
<option value="drawn">Ejection Drawn</option>
<option value="ejected">Ejected</option>
</select>
<select id="where">
<option value="set">Set</option>
<option value="navy">Navy</option>
<option value="leftwing">1/2 side past 5</option>
<option value="rightwing">4/5 side past 5</option>
<option value="point">Point/3</option>
<option value="lefttwo">1/2 side 2 meter</option>
<option value="righttwo">4/5 side 2 meter</option>
<option value="1">6 on 5 1</option>
<option value="2">6 on 5 2</option>
<option value="3">6 on 5 3</option>
<option value="4">6 on 5 4</option>
<option value="5">6 on 5 5</option>
<option value="6">6 on 5 6</option>
</select>
<select id="when">
<option value="q1">Quarter 1</option>
<option value="q2">Quarter 2</option>
<option value="q3">Quarter 3</option>
<option value="q4">Quarter 4</option>
</select>
<button type="button" onclick="myFunction()"> Save </button>
That being said, this still isn't the best solution - use #weBBer's code INSTEAD
because a <select> element has a property called options, which you can use the selectedIndex property to get the selected <option> - see the better answer for an example

How to make multi level dropdown menu using select option mentod

i want to make multi level dropdown menu using select and option method
<select>
<option value="" data-display-text="Select">None</option>
<option value="oranges">SSC</option>
<option value="oranges">GATE</option>
<option value="bananas">BANK PO</option>
<option value="bananas">RAILWAY</option>
</select>

As far as I understand from your "multi level dropdown" concept, you can make a simple dropdown and just move some elements with CSS. Category name is stored in optgroup.
<select name="select_projects" id="select_projects">
<option value="">project.xml</option>
<optgroup label="client1">
<option value="">project2.xml</option>
</optgroup>
<optgroup label="client2">
<option value="">project5.xml</option>
<option value="">project6.xml</option>
<optgroup label="client2_a">
<option value="" style="margin-left:23px;">project7.xml</option>
<option value="" style="margin-left:23px;">project8.xml</option>
</optgroup>
<option value="">project3.xml</option>
<option value="">project4.xml</option>
</optgroup>
<option value="">project0.xml</option>
<option value="">project1.xml</option>
</select>
Update:
Or if you are trying to make a "chain" of dropdowns like you have in start menu in Windows, that is the easiest way to do it:
https://jqueryui.com/menu/

You can't make multiple levels with the select element.
In this case you would create a custom component with the capability to display something like 'hierarchic'.
Or use the trick like this:
<select>
<option>select me</option>
<option> me indented</option>
<option> even more indentation</option>
</select>

If you want to use ONE select you could use <optgroup/>. See example.
Note: it's not very multi-level, but it allows for some kind of relevant grouping.
<select>
<option value="" selected="selected">Select an option...</option>
<optgroup label="SSC">
<option value="oranges1">some option</option>
<option value="oranges2">some option</option>
<option value="oranges3">some option</option>
</optgroup>
<optgroup label="GATE">
<option value="bananas1">some option</option>
<option value="bananas2">some option</option>
<option value="bananas3">some option</option>
</optgroup>
<optgroup label="BANK PO">
<option value="apples1">some option</option>
<option value="apples2">some option</option>
<option value="apples3">some option</option>
</optgroup>
<optgroup label="RAILWAY">
<option value="grapes1">some option</option>
<option value="grapes2">some option</option>
<option value="grapes3">some option</option>
</optgroup>
</select>

You can't make multiple levels with the select element.
Any ways, if its any help, there's
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>

Maybe this can insprire you even if not totally correctly interpreted by editors.
<div class="col-2 search-filter">
<select id="searchByYear" multiple="multiple" ng-model="varYear.value">
<option value="2023">2023
<option value="2023-H1">H1</option>
<option value="2023-H2">H2</option>
</option>
<option value="2022">2022
<option value="2022-H1">H1</option>
<option value="2022-H2">H2</option>
</option>
<option value="2021">2021
<option value="2021-H1">H1</option>
<option value="2021-H2">H2</option>
</option>
<option value="2020">2020
<option value="2020-H1">H1</option>
<option value="2020-H2">H2</option>
</option>
<option value="2019">2019
<option value="2019-H1" >H1</option>
<option value="2019-H2" >H2</option>
</option>
</select>
</div>

select value of <select> tags with the onchange(this.value)

I am trying to get the value of the selection on each change, I tried to log it to the console in my javascript but it doesn't work, this is some of the code from the problem... I am new to programming Please keep the answer simple... Thanks
function add(x) {
var selection = x;
console.log(x);
}
<select class="seletion" onchange="add(this.value)">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
<option value="d">D</option>
<option value="e">E</option>
<option value="f">F</option>
<option value="g">G</option>
<option value="h">H</option>
<option value="i">I</option>
<option value="j">J</option>
<option value="k">K</option>
<option value="l">L</option>
<option value="m">M</option>
<option value="n">N</option>
<option value="o">O</option>
<option value="p">P</option>
<option value="q">Q</option>
<option value="r">R</option>
<option value="s">S</option>
<option value="t">T</option>
<option value="u">U</option>
<option value="v">V</option>
<option value="w">W</option>
<option value="x">X</option>
<option value="y">Y</option>
</select>

ANSWER UPDATE
Reading from HTMLSelectElement you can see a method:
add() Adds an element to the collection of option elements for this select element.
This is the function called and not yours.
Indeed, you can see this in the following example:
var opt1 = document.createElement("option");
opt1.value = "1";
opt1.text = "Option: Value 1";
function add (x) {
var selection = x;
console.log(x);
}
<select class="seletion" onchange="add(opt1);console.log('New option added at the end')">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
<option value="d">D</option>
<option value="e">E</option>
<option value="f">F</option>
<option value="g">G</option>
<option value="h">H</option>
<option value="i">I</option>
<option value="j">J</option>
<option value="k">K</option>
<option value="l">L</option>
<option value="m">M</option>
<option value="n">N</option>
<option value="o">O</option>
<option value="p">P</option>
<option value="q">Q</option>
<option value="r">R</option>
<option value="s">S</option>
<option value="t">T</option>
<option value="u">U</option>
<option value="v">V</option>
<option value="w">W</option>
<option value="x">X</option>
<option value="y">Y</option>
</select>
The name of your function add is considered a different function from JS.
Change its name, for example, to add1 or call it as a global function attached to the window object:
function add1(x) {
var selection = x;
console.log('add1: ' + x);
}
function add(x) {
var selection = x;
console.log('window.add: ' + x);
}
<select class="seletion" onchange="add1(this.value);">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
<option value="d">D</option>
<option value="e">E</option>
<option value="f">F</option>
<option value="g">G</option>
<option value="h">H</option>
<option value="i">I</option>
<option value="j">J</option>
<option value="k">K</option>
<option value="l">L</option>
<option value="m">M</option>
<option value="n">N</option>
<option value="o">O</option>
<option value="p">P</option>
<option value="q">Q</option>
<option value="r">R</option>
<option value="s">S</option>
<option value="t">T</option>
<option value="u">U</option>
<option value="v">V</option>
<option value="w">W</option>
<option value="x">X</option>
<option value="y">Y</option>
</select>
<select class="seletion" onchange="window.add(this.value);">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
<option value="d">D</option>
<option value="e">E</option>
<option value="f">F</option>
<option value="g">G</option>
<option value="h">H</option>
<option value="i">I</option>
<option value="j">J</option>
<option value="k">K</option>
<option value="l">L</option>
<option value="m">M</option>
<option value="n">N</option>
<option value="o">O</option>
<option value="p">P</option>
<option value="q">Q</option>
<option value="r">R</option>
<option value="s">S</option>
<option value="t">T</option>
<option value="u">U</option>
<option value="v">V</option>
<option value="w">W</option>
<option value="x">X</option>
<option value="y">Y</option>
</select>

Try this : Your code looks good to me but somehow function name add is not working, once i change the name of function it starts working, see working snippet
function showSelection(x) {
alert(x);
}
<select class="seletion" onchange="showSelection(this.value);">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
<option value="d">D</option>
<option value="e">E</option>
<option value="f">F</option>
<option value="g">G</option>
<option value="h">H</option>
<option value="i">I</option>
<option value="j">J</option>
<option value="k">K</option>
<option value="l">L</option>
<option value="m">M</option>
<option value="n">N</option>
<option value="o">O</option>
<option value="p">P</option>
<option value="q">Q</option>
<option value="r">R</option>
<option value="s">S</option>
<option value="t">T</option>
<option value="u">U</option>
<option value="v">V</option>
<option value="w">W</option>
<option value="x">X</option>
<option value="y">Y</option>
</select>

Here is one more reliable solution
function addsel() {
var selection = document.getElementById("sel1").value;
console.log(selection);
}
<select id="sel1" class="seletion" onchange="addsel()">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
<option value="d">D</option>
<option value="e">E</option>
<option value="f">F</option>
<option value="g">G</option>
<option value="h">H</option>
<option value="i">I</option>
<option value="j">J</option>
<option value="k">K</option>
<option value="l">L</option>
<option value="m">M</option>
<option value="n">N</option>
<option value="o">O</option>
<option value="p">P</option>
<option value="q">Q</option>
<option value="r">R</option>
<option value="s">S</option>
<option value="t">T</option>
<option value="u">U</option>
<option value="v">V</option>
<option value="w">W</option>
<option value="x">X</option>
<option value="y">Y</option>
</select>

Using in-line event handlers is not always the best idea.
Why not try using the DOM API to handle this scenario?
Remove the 'onchange' handler in the <select>
then add the following to your JS script
document.getElementsByClassName('seletion')[0].addEventListener('change', function(){
console.log(this.value);
});

HTML drop down javascript help needed

I have two HTML drop down
<select>
<option value="">Please Select</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select>
<option value="">Please Select</option>
<option value="a">a</option>
<option value="b">b</option>
</select>
Now, If I Select volvo from first drop down and b from second dropdown and then I change to Audi in the first dropdown, I want the value of second drop down to show Please Select instead of b (selected previously) using javascript
PS: I am new to Javascript

It's as easy as:
<select onChange="document.getElementById('secondOption').selectedIndex = 0;">
<option value="">Please Select</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select id="secondOption">
<option value="">Please Select</option>
<option value="a">a</option>
<option value="b">b</option>
</select>

You can reset the index supposing you've two <select>
var selects = document.getElementsByTagName('select');
selects[0].onchange = function(){
selects[1].selectedIndex = 0;
}