jQuery Select 盒子重定向

Question

I'm having a bit of a mare with jQuery and I was hoping someone could clarify some bits for me. I'm under no illusion any of this is elegant or optimal, and I have NEVER got on with Javascript in any form so please don't judge me too harshly!

Basically, I've got a Wordpress plugin that works very well for most things I want it to do. The main thing is that it offers the ability to select the delivery method from the Woocommerce product menu page. But I've been asked for the available menu options to be filtered by delivery method and I can't see a way of doing this live on the page, so what I've come up with is a "simpler" solution. I'm intending to set up three different page implementations of the menu, one for each of the delivery options (deliver, pick up and eat in), each with categories filtered via shortcode for that delivery method. When the page loads I've got jQuery setting the default option for the dropdown to match that page and then whenever the dropdown is changed from this option it can trigger a redirect to one of the other relevant pages.

I know this is a messy way of doing it, but I have no idea how or even if I could filter the products on the menu any other way, but if someone has a suggestion I'd love to hear it!

Anyway, I've got this partially working. I can set the dropdown default on page load easily enough, and I've managed to get an if statement kind of working, but it only seems to work for the first option and no others. I also can briefly see ifelse undefined in the console before the page changes on a redirect. I've also tried to use a variable, but whenever I've tried using it in the if condition checks it just comes up as undefined or null even though I can view it on the previous line like this:

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

Obviously, I know a variable would be a better way to go, but because I can't get it to work (and I know it's me being dumb but I just gave up on it), here's what I've got so far:

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

Note: I have used the WordPress variable {site_url} instead of publishing the website on here, I have no idea if this would actually work in the jQuery, but it would be much better to use a dynamic URL like this rather than a hard-coded one, so if anyone knows the best way of doing that as well it'd be great to know.

As I've said, this script partially works and I've had to put it in a HTML block on the individual pages to get it to trigger at present. So if anyone could help me tidy this up, point out the millions of ways I'm going wrong and help me get this working fully, it would be MASSIVELY appreciated!

Thanks in advance!

Answer 1

I think you want to achieve redirect based on the select option. check below code.

 $('#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>