Javascript 排序适用于 Firefox 而不是 Chrome

Question

Javascript 排序适用于 Firefox，但不适用于 Chrome。 只是一个简单的 Select 将用户带到一个新的 url。 我可以进行哪些修改以使其适用于所有浏览器？

Stackoverflow 说我需要更多说明文字。 虽然我认为这是一个相当简单的问题。 用户选择一个选项并被定向到一个新的 url。 代码会在 Firefox 中重定向，但不会在 Chrome 中重定向。 我没有检查其他浏览器。

 function url() { var value1 = $("#sort").val(); var currentURL = window.location.href; if (window.location.href.endsWith("/")) { var str1 = (currentURL + '?'); } else if (window.location.href.includes('&orderby')) { var str1 = (currentURL.split('&orderby')[0] + '&'); } else if (window.location.href.includes('?orderby')) { var str1 = (currentURL.split('?orderby')[0] + '?'); } else { var str1 = (currentURL + '&'); } if (value1 == 'sort1') { window.location.href = str1 + "orderby=date&order=dsc"; } if (value1 == 'sort3') { window.location.href = str1 + "orderby=date&order=asc"; } if (value1 == 'sort5') { window.location.href = str1 + "orderby=title&order=dsc"; } if (value1 == 'sort7') { window.location.href = str1 + "orderby=title&order=asc"; } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="sort" class="sorts2"> <option class="sorts-option" value="">Sort</option> <option class="sorts-option" value="sort1" onclick="url()">Latest</option> <option class="sorts-option" value="sort3" onclick="url()">Oldest</option> <option class="sorts-option" value="sort5" onclick="url()">Title DSC</option> <option class="sorts-option" value="sort7" onclick="url()">Title ASC</option> </select>

Answer 1

选择<option>不会在 Chrome 中触发click事件。 尝试在<select>上监听change事件：

 $('#sort').on('change', url); function url(e) { console.log('url running'); var value1 = $("#sort").val(); var currentURL = window.location.href; if (window.location.href.endsWith("/")) { var str1 = (currentURL + '?'); } else if (window.location.href.includes('&orderby')) { var str1 = (currentURL.split('&orderby')[0] + '&'); } else if (window.location.href.includes('?orderby')) { var str1 = (currentURL.split('?orderby')[0] + '?'); } else { var str1 = (currentURL + '&'); } console.log('insert code to assign to window.location.href here...'); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="sort" class="sorts2"> <option class="sorts-option" value="">Sort</option> <option class="sorts-option" value="sort1">Latest</option> <option class="sorts-option" value="sort3">Oldest</option> <option class="sorts-option" value="sort5">Title DSC</option> <option class="sorts-option" value="sort7">Title ASC</option> </select>

Answer 2

鉴于您使用的是 jQuery，最好使用jQuery.change() ：

 $('#sort').change(function () { var value1 = this.value; var currentURL = window.location.href; if (window.location.href.endsWith('/')) { var str1 = (currentURL + '?'); } else if (window.location.href.includes('&orderby')) { var str1 = (currentURL.split('&orderby')[0] + '&'); } else if (window.location.href.includes('?orderby')) { var str1 = (currentURL.split('?orderby')[0] + '?'); } else { var str1 = (currentURL + '&'); } if (value1 == 'sort1') { str1 += 'orderby=date&order=dsc'; } if (value1 == 'sort3') { str1 += 'orderby=date&order=asc'; } if (value1 == 'sort5') { str1 += 'orderby=title&order=dsc'; } if (value1 == 'sort7') { str1 += 'orderby=title&order=asc'; } console.log(str1); // window.location.href = str1; });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="sort" class="sorts2"> <option class="sorts-option" value="">Sort</option> <option class="sorts-option" value="sort1">Latest</option> <option class="sorts-option" value="sort3">Oldest</option> <option class="sorts-option" value="sort5">Title DSC</option> <option class="sorts-option" value="sort7">Title ASC</option> </select>

Answer 3

您必须在选择上执行onchange而不是onclick选项标签。 （因为 select 是实际的输入控件，您必须仅将事件绑定到select标签。

像这样

 function url() { var value1 = $("#sort").val(); var currentURL = window.location.href; if (window.location.href.endsWith("/")) { var str1 = (currentURL + '?'); } else if (window.location.href.includes('&orderby')) { var str1 = (currentURL.split('&orderby')[0] + '&'); } else if (window.location.href.includes('?orderby')) { var str1 = (currentURL.split('?orderby')[0] + '?'); } else { var str1 = (currentURL + '&'); } if (value1 == 'sort1') { window.location.href = str1 + "orderby=date&order=dsc"; } if (value1 == 'sort3') { window.location.href = str1 + "orderby=date&order=asc"; } if (value1 == 'sort5') { window.location.href = str1 + "orderby=title&order=dsc"; } if (value1 == 'sort7') { window.location.href = str1 + "orderby=title&order=asc"; } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="sort" class="sorts2" onchange="url()"> <option class="sorts-option" value="">Sort</option> <option class="sorts-option" value="sort1" >Latest</option> <option class="sorts-option" value="sort3" >Oldest</option> <option class="sorts-option" value="sort5" >Title DSC</option> <option class="sorts-option" value="sort7" >Title ASC</option> </select>

Answer 4

不要将“Onclick”事件添加到每个选项，而是使用“OnChange”事件进行选择。 然后它会自动工作。 <select id="sort" class="sorts2" onChange="url()"> <option class="sorts-option" value="">Sort</option> <option class="sorts-option" value="sort1" >Latest</option> <option class="sorts-option" value="sort3" >Oldest</option> <option class="sorts-option" value="sort5" >Title DSC</option> <option class="sorts-option" value="sort7" >Title ASC</option> </select>

尝试这个。