We Keep Coding

Moving option value on top of dropdown list using jQuery

I have this code:
function SelectReferralFromQueryString() {
var queryStringName = GetParameterValues('Referral');
if (queryStringName != undefined || queryStringName != null) {
queryStringName = decodeURIComponent(queryStringName);
var exists = false;
$('#refDropDown option').each(function () {
if (this.value == queryStringName) {
exists = true;
var option = $(this);
$(this).remove();
$('#refDropDown option').prepend(option);
return false;
}
});
if (exists == true){
DropDownReferral.value = queryStringName;
$("#refDropDown").prop("disabled", true);
}
}
}
function GetParameterValues(param) {
var url = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for (var i = 0; i < url.length; i++) {
var urlparam = url[i].split('=');
if (urlparam[0] == param) {
return urlparam[1];
}
else
return false;
}
}
And this HTML:
<select name="refDropDown" id="refDropDown" class="items" data-hidden-field="DropDownReferral">
<option value="">Please Select</option>
<option value="Albert">Al</option>
<option value="Steve T">Steve</option>
</select>
So, the logic is:
If 'Referral' which is a query string, gets passed, then I am checking the value in my select option and moving it on top and disabling the dropdown. NOT WORKING! See the picture below.
If the dropdown doesnt have the query string value then disable the dropdown and store it in the hidden field. (WORKING!)
What I am missing here?
If I am passing ?Referral=Albert, then it should show me 'Al' on top. If I am passing ?Referral=Steve, then is show 'Steve' on top and disable the dropdown.

You can use the val() function of jQuery to select the option:
$("#refDropDown").val(queryStringName);

If you can count on the referral being a valid value you can try this (untested):
$('#refDropDown').val(queryStringName).prop('disabled', true);
Otherwise check for whether or not the value exists first by doing something like this:
if($('#refDropDown option[value="' + queryStringName + '"]').length != 0){
//code above here
}
Then get rid of that loop over the options and that if that is setting the select box to disabled.
Also as a side note, a disabled select box won't submit a value when you submit the form, so you will need to use the referral parameter, or a hidden field.

How to change options of a select using JavaScript

I have an HTML page in which I have 2 selects.
<select id="field" name="field" onchange="checkValidOption();">
<option />
<option value="Plugin ID">Plugin ID</option>
<option value="Name">Name</option>
</select>
<select id="operator" name="operator" onchange="checkValidOption();">
<option />
<option value="EQUALS">EQUALS</option>
<option value="CONTAINS">CONTAINS</option>
<option value="NOT CONTAINS">NOT CONTAINS</option>
<option value="REGEX">REGEX</option>
</select>
What I'd like to happen is that checkValidOption() could make it so that if "Plugin ID" is selected in field that the only option is EQUALS (and it's selected) and otherwise all the other options are available. Any idea on how to approach this?
I tried changing the innerHTML of the operator select in JS:
document.getElementById("operator").innerHTML =
"<option value='EQUALS'>EQUALS</option>";
However this results in an empty select (this would also include manually setting the many options for going back to having all the ones listed above).
I can't think of another solution, any help would be greatly appreciated.

Try this:
Demo here
var field = document.getElementById('field');
var operator = document.getElementById('operator');
field.onchange = function () { fieldcheck(); }
operator.onchange = function () { fieldcheck(); }
fieldcheck();
function fieldcheck() {
if (field.value == 'Plugin ID') {
for (i = 0; i < operator.options.length; ++i) {
if (operator.options[i].value != 'EQUALS') {
operator.options[i].disabled = true;
}
};
operator.value = 'EQUALS';
} else {
for (i = 0; i < operator.options.length; ++i) {
operator.options[i].disabled = false;
};
}
}

To manipulate options when Plugin ID was selected:
function checkValidOption(){
var x=document.getElementById("field");
var y=document.getElementById("operator");
if (x.options[1].selected === true){
document.getElementById("operator").options[1].selected = true;
for(var i=0; i<y.length; i++){
if (i !== 1){
//disabling the other options
document.getElementById("operator").options[i].disabled = true;
}
}
}
else{
for(var i=0; i<y.length; i++){
//enabling the other options
document.getElementById("operator").options[i].disabled = false;
}
}
}
Here's a link to fiddle

A select field doesn't use the innerHTML method, you need to use value.
document.getElementById("operator").value = "...";

heres a jquery solution.
every time the first select changes, it produces new options from an array for the 2nd select. issue here is i had to change the option values of the first select to 0 and 1 to select which value in the array, you can manipulate those later if you are storing this info somewhere
http://jsfiddle.net/2TZJh/
$(document).ready(function() {
$("#field").change(function() {
var val = $(this).val();
$("#operator").html(options[val]);
});
var options = [
'<option value="EQUALS">EQUALS</option>',
'<option></option><option value="EQUALS">EQUALS</option><option value="CONTAINS">CONTAINS</option> <option value="NOT CONTAINS">NOT CONTAINS</option> <option value="REGEX">REGEX</option>'
];
});

Ignore the first option when sorting every select on a page

I am trying to sort every select on a page without sorting the first option. I have tried changing a few values but I end up sorting only one of them. This is working now but not ignoring first option for each select:
HTML:
<select name="numero_uno" id="numero_uno">
<option>Select</option>
<option>Mops</option>
<option>Brooms</option>
<option>X-wings</option>
</select>
<select name="number_two" id="number_two">
<option>Select</option>
<option>Cabbage</option>
<option>Alfalfa</option>
<option>Beets</option>
</select>
Javascript:
function sortSelect(e){
var oA,i,o;oA=[];
for(i=0;i<e.options.length;i++){
o=e.options[i];
oA[i]=new Option(o.text,o.value,o.defaultSelected,o.selected);
}
oA.sort(function(a,b){
var la=a.text.toLowerCase(),lb=b.text.toLowerCase();
if(la>lb){
return 1;
}
if(la<lb ){
return-1;
}
return 0;
});
e.options.length=0;
for(i=0;i<oA.length;i++){
e.options[i]=oA[i];oA[i]=null;
}
return true;
}
var eA=document.getElementsByTagName('select');
for(var i=0;i<eA.length;i++){
sortSelect(eA[i]);
}
I have seen some solutions that use jQuery but I want to do this with just javascript.
jsfiddle: http://jsfiddle.net/cfX8E/

Can't you just change the loops to start from the second option?
function sortSelect(e){
var oA,i,o;oA=[];
for(i=1;i<e.options.length;i++){
o=e.options[i];
oA[i-1]=new Option(o.text,o.value,o.defaultSelected,o.selected);
}
oA.sort(function(a,b){
var la=a.text.toLowerCase(),lb=b.text.toLowerCase();
if(la>lb){
return 1;
}
if(la<lb ){
return-1;
}
return 0;
});
e.options.length=1;
for(i=0;i<oA.length;i++){
e.options[i+1]=oA[i];oA[i]=null;
}
return true;
}
var eA=document.getElementsByTagName('select');
for(var i=0;i<eA.length;i++){
sortSelect(eA[i]);
}

Don't add the first option. Sort the select list first and then add the first option at the top.

Javascript code display select values

I am having some problems with finding out if the value is missing or not.
I have the following select box on my screen:
<select id="user_list" onclick="load_user(this)" name="user_list" size="21" style="width:200px;">
<option value="1">Item1</option>
<option value="2">Item2</option>
<option value="4">Item4</option>
</select>
I am using the following JavaScript:
var userList = document.getElementById("user_list");
for (var i=0;i<userList.options.length; i++) {
if (userList.options[i].value != (i+1)) {
alert((i+1)+" is missing");
break;
}
else
{
alert((userList.options.length+1)+" is missing");
break;
}
}
The problem I am facing is that if option values 1,2,3,4 are there is replys back with 5 (as that is the next number) which is fine as that is what I want.
If I remove option 3 (like in my select box above) it keeps replying with 4 is missing when it should say 3 is missing.
If i remove the following code:
else
{
alert((userList.options.length+1)+" is missing");
break;
}
it does what I want it to do, but it doesn't get the next value number after checking all values (so it stops after reading the last option in the list).
What it should do is go though all the options in the select box and if one of the values is missing it should alart the one that is missing. If all value numbers are there then it should alart the next available option that is missing.
Can anyone see what I am doing wrong?

It keeps telling you that 4 is missing because you are running the else code in every iteration of the loop (until it finds one that is missing). The code in your else should only be ran once. You can use a flag variable to set if one is missing and check after the loop. Try changing the js code to
var allFound = true;
var userList = document.getElementById("user_list");
for (var i=0;i<userList.options.length; i++) {
if (userList.options[i].value != (i+1)) {
alert((i+1)+" is missing");
allFound = false;
break;
}
}
if(allFound)
alert((userList.options.length+1)+" is missing");

This works on Jfiddle http://jsfiddle.net/Vt2DJ/
var userList = document.getElementById("user_list");
var whileindex = 0; //keeps track of the number of options checked
var i = 0; //values that should be available for the options
while ( whileindex < userList.options.length )
{
if (userList.options[i].value != (i+1)) {
alert((i+1)+" is missing");
i++; //this because otherwise we have a wrong offset for the check
}
else
{
whileindex++; //option exists
}
i++; //go on to the next value
}

Search a dropdown

I have this HTML dropdown:
<form>
<input type="text" id="realtxt" onkeyup="searchSel()">
<select id="select" name="basic-combo" size="1">
<option value="2821">Something </option>
<option value="2825"> Something </option>
<option value="2842"> Something </option>
<option value="2843"> _Something </option>
<option value="15999"> _Something </option>
</select>
</form>
I need to search trough it using javascript.
This is what I have now:
function searchSel() {
var input=document.getElementById('realtxt').value.toLowerCase();
var output=document.getElementById('basic-combo').options;
for(var i=0;i<output.length;i++) {
var outputvalue = output[i].value;
var output = outputvalue.replace(/^(\s| )+|(\s| )+$/g,"");
if(output.indexOf(input)==0){
output[i].selected=true;
}
if(document.forms[0].realtxt.value==''){
output[0].selected=true;
}
}
}
The code doesn't work, and it's probably not the best.
Can anyone show me how I can search trough the dropdown items and when i hit enter find the one i want, and if i hit enter again give me the next result, using plain javascript?

Here's the fixed code. It searches for the first occurrence only:
function searchSel() {
var input = document.getElementById('realtxt').value;
var list = document.getElementById('select');
var listItems = list.options;
if(input === '')
{
listItems[0].selected = true;
return;
}
for(var i=0;i<list.length;i++) {
var val = list[i].value.toLowerCase();
if(val.indexOf(input) == 0) {
list.selectedIndex = i;
return;
}
}
}
You should not check for empty text outside the for loop.
Also, this code will do partial match i.e. if you type 'A', it will select the option 'Artikkelarkiv' option.

Right of the bat, your code won't work as you're selecting the dropdown wrong:
document.getElementById("basic-combo")
is wrong, as the id is select, while "basic-combo" is the name attribute.
And another thing to note, is that you have two variable named output. Even though they're in different scopes, it might become confusing.

For stuff like this, I'd suggest you use a JavaScript library like jQuery (http://jquery.com) to make DOM interaction easier and cross-browser compatible.
Then, you can select and traverse all the elements from your select like this:
$("#select").each(function() {
var $this = $(this); // Just a shortcut
var value = $this.val(); // The value of the option element
var content = $this.html(); // The text content of the option element
// Process as you wish
});