javascript - 如何为 a+ b 编写 js 重定向规则以始终将 a 放在 b 之前，即使在 b+a 场景中也是如此？

Question

这里是新手，温柔点!

我正在尝试为以下内容合并一些重定向规则，但遇到了困难。

基本上，用户从 2 个相同的下拉列表中选择 2 个值，因此可以是 A&B 或 B&A。

但是如果 url example.com/combo/B-A，我需要它重定向到 example.com/combo/A-B

此外，如果我以糟糕的方式处理它，请接受更好的建议。

<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>

Answer 1

“简单”排序也可以完成这项工作 - 前提是选项 - values 以有意义的方式设置:

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>