We Keep Coding

jQuery Select Box Redirections

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!

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>

jquery autocomplete doesn't display any result

the html code is way too long to copy and paste on stackoverflow so I'm just gonna link my site. If you go to the site, you will see the search bar above some designer names. basically I'm trying to implement autocomplete using jquery-ui plugin. and It doesn't show any result below the search bar. I've never used this plugin so I literally have no idea why this doesn't work.
I'm handling the autocomplete part in /js/autocomplete.js. There's not much code in it. data and adding to event listener. that's it.
let designers = [ .. ] // click to see whole data
$(function() {
$('#keyword').autocomplete({
source: designers,
minLength: 6
})
})
Any help would be appreciated :)

Actually when pressing on search input you have error in console which leading to this place in your code. That's why autocomplete doesn't work.
$(".m4").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
});

Try JQuery UI autocomplete (https://jqueryui.com/autocomplete/#default)

It does for me...
You've got minLength of 6 there meaning it won't search through the array until you've typed 6 characters, tried running the code with out the minLength parameter and worked as expected

How to get text from selected value in a dropdownlist which is js based

Hello i have trouble getting the value out of a dropdownlist created with the plugin FacetWP. I have searched A LOT and tried a lot of different methods to get the text value out of that list but with no success. my latest try was:
var messagepop = $(".facetwp-filter .facetwp-facet-perioxeskalipsis > .fs-label-wrap > .fs-label").text();
alert (messagepop);
I have no idea what else to try.. i tried siblings() find() and everything other but i was getting a blank box in the alert..any help would be appreciated!
UPDATED: problem was due to an ajax request taking place at the time. Had to place the code a few lines further down!

Try this out
$('.facetwp-filter').find('div[data-name="perioxeskalipsis"]').find('div.fs-label-wrap').find('div.fs-label').text();
Hope this will help you.

how to add some html line on javascript alert box

I want to create an alert box with some details but my code is not working, please help me.
<script>
alert('<ul>
<li>Language must be in english .</li>
<li>Topic's must be on Digitalcoin.</li>
<li>Write a good title.</li>
<li>Don't give <b>Read More</b> button with other sites link.</li>
</ul>',{
ok : 'Ok'
})
</script>

Sorry but you can't put html in the native JavaScript's alert. You can use jquery's dialog or bootstart's alert, here examples:
https://jqueryui.com/dialog/
http://www.w3schools.com/bootstrap/bootstrap_alerts.asp

You can create your own custom alert box to allow html markup. Or you can use a library like #epascarello has mentioned. Here is a great article on how to create your own modal box with html5 and css3. I have gone ahead and created a starting point.
Here's the jsfiddle.

Function to create/add another select (dropdown) box

I need to find a away to insert/add a <select> (dropdown) box on click of a button. I want each click of the button to keep adding a new <select>.
Tested out some javascript/jquery functions and as I don't have much background in it, I'm having no luck!
Edit:
Sorry just kinda answered my own question with help from other questions to anyone wandering just view source code on this.
http://jsbin.com/ufuxuq/
that was pretty much what I wanted, but had to implement some php within the list so I had extra trouble with that, but it's all good now.
Thanks

You can create a <select> element (or any other element) with $("<select/>");
The append function can be used to append html into an item.
Combining them yields:
$("#buttonToAddDD").click(function () {
var newDD = $("<select/>");
$(newDD).append("<option>New Option 1</option>");
$(newDD).append("<option>New Option 2</option>");
$("#whereYouWantToAddNewDD").append(newDD);
});
<div id="whereYouWantToAddNewDD"></div>
<input type="button" id="buttonToAddDD" value="Add DD" />

Sorry just kinda answered my own question with help from other questions to anyone wandering just view source code on this.
http://jsbin.com/ufuxuq/
that was pretty much what I wanted, but had to implement some php within the list so I had extra trouble with that, but it's all good now.
Thanks

Dynamically creating/removing a html code is easy with JQuery as explained above by Adam. However keep caution to provide users with facility to remove them as well.
Best way would be adding a id to the select box and provide a span/div with a close 'X' on clicking which either it could be removed completely
$(document).ready(function(){
{
$("#close").click({function(){
$("#selectid").remove(); // to remove the select
$("#selectid").hide(); //this would hide it but when submitted, the default/selected option shall still be submitted
$("#close").remove();
}):
});