jQuery Select 盒子重定向

Question

我對 jQuery 有點麻煩，我希望有人能為我澄清一些問題。 我不認為這是優雅或最佳的，我從來沒有以任何形式使用 Javascript，所以請不要太嚴厲地評判我！

基本上，我有一個 Wordpress 插件，它非常適合我想要它做的大多數事情。 最主要的是它提供了 select 產品菜單頁面中的交貨方式的能力。 但是我被要求按交付方式過濾可用的菜單選項，我看不到在頁面上實時執行此操作的方法，所以我想出了一個“更簡單”的解決方案。 我打算設置菜單的三個不同頁面實現，一個用於每個交付選項（交付、取貨和就餐），每個都有通過該交付方法的短代碼過濾的類別。 當頁面加載時，我有 jQuery 設置下拉菜單的默認選項以匹配該頁面，然后每當下拉菜單從此選項更改時，它都可以觸發重定向到其他相關頁面之一。

我知道這是一種混亂的做法，但我不知道如何或什至可以以任何其他方式過濾菜單上的產品，但如果有人有建議，我很想聽聽！

無論如何，我已經部分工作了。 我可以很容易地在頁面加載時設置下拉默認值，並且我已經設法使 if 語句起作用，但它似乎只適用於第一個選項而沒有其他選項。 在重定向頁面更改之前，我還可以在控制台中簡要查看ifelse undefined 。 我也嘗試過使用一個變量，但是每當我嘗試在 if 條件檢查中使用它時，它只會出現為 undefined 或 null 即使我可以在上一行中查看它，如下所示：

 jQuery("#fdoe_delivery_dropdown").on("change",function(){//Getting Value var selValue = $("#fdoe_delivery_dropdown").val(); console.log ("Variable delivery method is - " + selValue);

顯然，我知道一個變量將是 go 的更好方法，但因為我無法讓它工作（我知道這是我很愚蠢，但我只是放棄了它），這就是我到目前為止所得到的：

 <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js"></script> <script type="text/javascript"> jQuery(document).ready(function($) { //Set opening delivery method for "Delivery" page jQuery("#fdoe_delivery_dropdown").val("delivery").change(); //Check initial delivery method console.log ("Opening delivery method is - " + jQuery('#fdoe_delivery_dropdown').val()); if($("#fdoe_delivery_dropdown option:selected").val() == "pickup") { //Log success to console and redirect console.log ("New delivery method is - " + jQuery('#fdoe_delivery_dropdown').val()); window.location.replace("{site_url}/pickup/"); } elseif($("#fdoe_delivery_dropdown option:selected").val() == "eatin") { //Log success to console and redirect console.log ("New delivery method is - " + jQuery('#fdoe_delivery_dropdown').val()); window.location.replace("{site_url}/eatin/"); } }); }); </script>

HTML：

 <select id="fdoe_delivery_dropdown" class="form-control input-lg"><option value="pickup" selected="">Pick Up</option><option value="delivery">Delivery</option></select>

注意：我使用了 WordPress 變量 {site_url} 而不是在此處發布網站，我不知道這是否真的適用於 jQuery，但使用動態 ZE6B391A8D2C4D458503A23A 會好得多編碼一個，所以如果有人知道這樣做的最佳方法，那就太好了。

正如我所說，這個腳本部分工作，我不得不把它放在各個頁面上的 HTML 塊中，以便目前觸發它。 因此，如果有人可以幫我整理一下，指出我出錯的數百萬種方式並幫助我充分發揮作用，我們將不勝感激！

提前致謝！

Answer 1

我認為您想基於 select 選項實現重定向。 檢查下面的代碼。

 $('#fdoe_delivery_dropdown').on('change', function(){ window.location = 'https://exmaple.com/'+$(this).val(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="fdoe_delivery_dropdown" class="form-control input-lg"> <option value="pickup" selected="">Pick Up</option> <option value="delivery">Delivery</option </select>