We Keep Coding

How to make dropdown selected if URL matched with value?

I'm trying to make a selection in the select box based on the URL. The urls are tied to the value attribute of option. How can I do this in jQuery?
<select>
<option value="http://name.com/">All</option>
<option value="http://name.com/category/electronics">Electronics</option>
<option value="http://name.com/category/books">Books</option>
<option value="http://name.com/category/furniture">Furniture</option>
<option value="http://name.com/category/kitchen">kitchen</option>
<option value="http://name.com/category/homeware">Homeware</option>
<option value="http://name.com/category/outdoors">Outdoors</option>
</select>

Maybe you want to bind the dropdown from the web URL. So you can add the id to your <select> tag like "drpCategory". Now you need to add below script for auto-selection of your dropdown.
$(function(){
$("#drpCategory").val(window.location.href);
});

At first, get the pathname from the URL you're currently in. You can do this with this function: window.location.pathname. Then in javascript code check if your pathname matches any of the options value and if it does then add selected attribute on that option.

If you just need to select an option on page load then the following should do it.
$(function(){
$( "select").val(window.location);
))

Put this code immediately after your <select> block:
<script>
$('select').last().val(location.href)
</script>
$('select').last() is jQuery's way to select the preceeding <select> element in the document. .val(value) is jQuery's way of changing the selection to the option with the specified value. By passing location.href to .val() you are telling it to select the option whose value contains the full URL of the current page.

How do you select an option value from a select box if you know the value?

Given the following jQuery plugin: http://selectric.js.org/index.html which replaces the functionality of that of a regular select box by using custom UL LI lists,
Based on the plugins documentation, I know that you can programmatically select an option value if you already know the index to select by using the following code:
$('#idofselectbox').prop('selectedIndex', 3).selectric('refresh');
But they do not include a sample to be able to find and select an option value by a value.
For example,
Let's say i'd like to select the option value named 'apples' without actually knowing its index in the select box. Is this even remotely possible?
<select id="idofselectbox">
<option value="oranges">oranges</option>
<option value="pears">pears</option>
<option value="apples">apples</option>
<option value="strawberries">strawberries</option>
</select>

You can set the value as if it's a regular combo box, then call refresh on selectic to refresh the UI.
$('#idofselectbox').val('apples').selectric('refresh');

How do I get all select elements that do not have an option selected using jQuery?

How do I get all select elements that do not have an option selected using jQuery?
<select id="one">
<option value=""></option>
<option value="test"></option>
</select>
<select id="two">
<option value=""></option>
<option selected value="test"></option>
</select>
What would the jQuery selector be that would return just #one based on no selection?

Refer to https://stackoverflow.com/a/63588880/3499595 if your case is not similar to OP (default value is "")
$('select option:selected[value=""]').parent()
Selects all the :selected options of all the select elements
Checks if the selected option has a value of "", which in your case means no option is actually selected.
Returns the parent (which would be a select)

You can take advantage of jQuery's .parent() and .not() functions. See below:
// selector for all 'select' elements with any option below it
var all = $("select>option").parent(); // alternative $("select")
// selector for all 'select' element with a selected child
var selected = $("select>option[selected]").parent();
// the subtraction set "all - selected" achieved by `not`.
var unselected = all.not(selected);
Note that jQuery's parent takes care of removing duplicates from a set of parents of child elements.
JsFiddle here.

The accepted answer gives all select elements with a selected option whose value is empty(""), which does answer the question in regard to the OP's sample HTML, where options with empty values are given, but it doesn't really answer the title question.
There is a difference between selecting an option with an empty value, and not selecting any option at all.
To select all select elements with no option selected, use
$('select').not(':has(option:selected)')

If you have jquery library then try
$('select option').filter(function(i,d){return !d.hasAttribute("selected")});

JQuery to change value based on selection

i have 2 dropdownlist, i want if i select Alabama in dropdwon1 the selected value in dropdwon2 should change in to Other.., how to do this using JQuery
<select id="dropdwon1">
<option value="1">Alabama</option>
<option value="2">Alaska</option>
<option value="3">Arizona</option>
</select>
<select id="dropdwon2">
<option value="3">Item1</option>
<option value="4">Item2</option>
<option value="5">Other..</option>
</select>

You must bind event to first select change event and check it's selected value and set value for second select like this:
//Bind change event to first select
$('#dropdwon1').on('change', function(){
//check selected value
var value = $(this).val();
if(value == 1){
//Set selected value for second select
$('#dropdwon2').val(5);
}
})

You have to initialize your value for the second select for the first value of your state select, like so :
if($("#dropdown1").val()=="1"){
$("#dropdown2").val("5"); // Set the value (your answer)
}
then use the change event and give the different values of the second select for the states values.
As the user can select Alabama again after having chosen another value, you have to put the code for the first value in the change event function.
Here is a jsfiddle :
https://jsfiddle.net/mantisse_fr/ak81o26s/4/

How to make a popup from unlisted option form [duplicate]

I want to make input option in select tag so user can choose between options or insert different value.
Is it possible?
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
**<insert user value>**
</select>

HTML solution with "list" attribute:
<input type="text" name="city" list="citynames">
<datalist id="citynames">
<option value="Boston">
<option value="Cambridge">
</datalist>

You will have to use javascript to get the additional value. Check this post for some example code:
Jquery dynamically update "other" option in select

Select elements can't contain anything other than option or optgroup elements. Here's a ref to the spec http://www.w3.org/TR/html5/forms.html#the-select-element
You may be better off adding an option for "other" in your dropdown and then using JS to detect for that choice to dynamically show an input (below the dropdown) for a custom value.

Position an input box over the select box and remove the border of the input box. Make the length of the input box shorter than the select box so that the select box may still be used at its end.
Use the oninput event to detect input being entered in the input box. On each keystroke check for a continuing match in the select box. When a match no longer exists there is no further need for the select box.
The server will expect to receive both the text box input, if any, and the select box input, if any, and should use the select value if provided otherwise the input value if provided.