Develop Reference

JQuery- clear field on lost focus unless the field was populated from dropdown

I have a textbox where the user puts in some text, and a dropdown appears. When the user selects something from the dropdown list, the text from the dropdown replaces the text that they typed.
Now, I want this textbox to clear itself if they didn't select anything from the dropdown.
So basically, the only text that can appear in the textbox is something that was ultimately selected from the dropdown. How would I achieve this?
I've tried:
jQuery("#" + field).focusout(function() {
jQuery("#" + field).val("");
});
But this still clears even if they selected from the dropdown. What logic would I implement to do this? Could I set a variable or something that is set to true when they select from a list. I would then check this on the focusout function?
Quite new to JQuery!

Use the autocomplete change event, check for the existence of ui (the item selected from the menu, if any. Otherwise the property is null), if it doesn't exist, then you know the user didn't select an autocomplete option, and you can empty the value:
change: function (ev, ui) {
if (!ui.item) {
$(this).val('');
}
}
Here's a simple demo fiddle

Possibly something like this:
jQuery("#" + field).focusout(function() {
var enteredValue = $("#" + field).val();
var listOfAvailableOptions = //put method call here
if($inArray(enteredValue, listOfAvailableOptions)) //possibly use IndexOf() here and check if = -1
{
jQuery("#" + field).val("");
}
});
The neater way would be to populate the values of a combo box from the AJAX call though

Change disabled select(dropdownlist) based on another select(dropdownlist) value

Basically what I'm trying to do is self-explanatory in the title. Here's a snippet of code which enables the dropdown/select so it can be changed via client, but it will not disable after change:
function setLocVals(passedVal) {
$('#DropDownList1').removeAttr("disabled");
$('#DropDownList1').val(passedVal);
$('#DropDownList1'').attr("disabled", "disabled");
}
Is this even possible? Or am I looking at this completely the wrong way?
I could change to a textbox, but this is a dropdown containing US states. If there's a record for the user then the selection is restricted for the user, if no record exists, then they can select.

Just put a condition when you have to disable. See this fiddle
Use this approach.
First set the value in option.
Then retrieve the current value of the option and check if it is set to the one than you have passed then put the condition to disable else not
function setLocVals(passedVal) {
$('#DropDownList1').val(passedVal);
var value = $('#DropDownList1').val();
if(value == passedVal){
$('#DropDownList1').attr("disabled", "disabled");
}
}

attribute change if the select box not empty

i am trying to check a value of a select box which filled according to user choice , this select will be populated once the user select options from other select boxes , now in the document.ready() the select is empty , i need to check if this select still empty , then disable a button , else , enable it again .
here is what i tried , it senses that the drop box is empty , but not when its populated !
if ($('#course-selection').html(null)) {
$('#show-wall-button').attr('disbaled','disabled');
}
else {
$('#show-wall-button').removeAttr('disabled');
}
this already fired on document.ready event when the page loads !.
I also tried this , but did not work
if ($('#course-selection').val(null)) {
$('#show-wall-button').attr('disbaled','disabled');
}
else {
$('#show-wall-button').removeAttr('disabled');
}

you can try this:
$('#show-wall-button').prop('disabled', $('#course-selection').is(':empty'))

try like:
if ($('#course-selection').val() === '') {
$('#show-wall-button').prop('disbaled', true);
}
else {
$('#show-wall-button').prop('disabled', false);
}
From the API: http://api.jquery.com/prop/

if ($('#course-selection').val(null))
should be
if ($('#course-selection').val() == '')

What about $('#course-selection option').length instead of the condition you are currently using?
In any case, I sense there may be a better way to do what you want, without having to check whether there are option tags inside the select box.

Checking the contents of the <select> is a bit messy. How about you do something like add an attribute data-populated="false" and set it to true when you populate it. Then you can just check the status of the attribute on the element in your conditions.

go with the suggestion of #Raminson
But in the example disabled is spelt wrong (disbaled) hence it will never removeAttr disabled when populated, coz the attribute which you have assigned is the wrong spelt disbaled

<select id="course-selection">
<option value="">null</option>
<option value="1">option1</option>
</select>
if you want to get selected value:
if($("#course-selection option:selected").val()=="")
$('#show-wall-button').attr('disbaled', true);
else
$('#show-wall-button').removeAttr('disabled');
if you want to get selected text:
if($("#course-selection option:selected").text()=="null")
$('#show-wall-button').attr('disbaled', true);
else
$('#show-wall-button').removeAttr('disabled');

Manually selecting a multiple drop down option if value is matched in JQuery

I need to manually select a dropdown option if a value is matched. Here is the code:
if($("#hiddenMyField").val() != "") {
$("#dropdown").each(function(i){
$('option', this).each(function() {
if($(this).html() == $("#hiddenMyField").val()) {
// code to select the option
} else {
alert('not matched');
}
});
});
}
How can I select the current option located in the drop down if that if condition is met?
Thanks

Options have a selected property:
this.selected = true;

$(this).attr('selected', true);
should do the magic.

All right I managed to find a workaround for this.
Since the options were being translated to divs with checkboxes with the ui.dropdownchecklist.js I first loaded the multiple dropdown with its normal view, then selected the necessary items with the this.selected = true and then I loaded the ui.dropdownchecklist.js function so the items will be translated back to divs with checkboxes. The user doesn't even see the actual multiple checkboxes so this worked out well for me. When they are translated to checkboxes, the selected items are kept and are also ticked when they are transferred.

jQuery: Showing a div if a specific a <select> option is selected?

I'm working on the address page for a shopping cart. There are 2 <select> boxes, one for Country, one for Region.
There are 6 standard countries available, or else the user has to select "Other Country". The <option> elements all have a numeric value - Other Country is 241. What I need to do is hide the Region <select> if the user selects Other Country, and also display a textarea.

You need to bind a function to the select list so that when it changes, your function decides if the div should be shown. Something like this (untested, hopefully syntactically close). Here's a live example.
$(document).ready( function() {
$('#YourSelectList').bind('change', function (e) {
if( $('#YourSelectList').val() == 241) {
$('#OtherDiv').show();
}
else{
$('#OtherDiv').hide();
}
});
});

It's the same principle as this question. You just need to connect to the change on the select , check the val() and hide()/show() the div.

In my opinion, you don't really need jQuery for this.
This simple JavaScript code will do the trick:
document.getElementById('country_id').onchange = function()
{
if (this.options[this.selectedIndex].value == 241) {
document.getElementById('region_id').style.display = 'block';
} else {
document.getElementById('region_id').style.display = 'none';
}
}
value works for most browsers, but yes, for older browsers you need select.options[select.selectedIndex].value. I updated my script.