We Keep Coding

Jquery, select dropdown option on Event

I have a Jquery with event keyup.
It select dropdownList(CityId) option, which text is liked/samme as a user write in inputbox(finpost).
The problem is that only work once.. I cant see whats wrong ?!
Help
$(document).ready(function () {
$('#finpost').keyup(function ()
{
$("#CityId > option").each(function ()
{
var t = this.text.toUpperCase();
if (t.indexOf($('#finpost').val().toUpperCase()) != -1)
{
$(this).attr("selected", 'true');
return false;
}
});
});
});

This work only once because your list can have only one selected option per time, but in your script logic you are setting attribute selected to true every time you find a matching without re-initializing others options
I think you should be good to go if you try this
$(document).ready(function () {
$('#finpost').keyup(function ()
{
var matchingFound = false;
$("#CityId > option").each(function ()
{
var t = this.text.toUpperCase();
if (t.indexOf($('#finpost').val().toUpperCase()) != -1 && !matchingFound)
{
$(this).attr("selected", 'true');
matchingFound = true;
}
else {
$(this).attr("selected", "false");
}
});
});
});

Now its working. The problem wass this linie:
$(this).attr('selected', true);..
I changed it to $(this).prop('selected', true);
and its work
$(document).ready(function () {
$('#finpost').keyup(function () {
$("#CityId > option").each(function () {
var t = this.text.toUpperCase();
if (t.indexOf($('#finpost').val().toUpperCase()) != -1) {
$(this).prop('selected', true);
return false;
}
});
});
});

function calling in jquery

I want to show div whose id is deliveryto1 when if condition is true it doesn't show deliverto1 div. This div(#deliverto1) is always showing in else part.
$('#delivery').change(function () {
if ($(this).val() == 1) {
$('#deliverto1').show();
$('#deliverto').hide();
} else {
$('#areas').show()
$('#deliverto').show();
}
});

You forgot to hide div in else part. Use .hide() in else part as shown below
$('#delivery').change(function () {
if ($(this).val() == 1) {
$('#deliverto1').show();
$('#deliverto').hide();
} else {
$('#areas').show()
$('#deliverto').show();
$('#deliverto1').hide();
}
});

Jquery toggle dropdown value

I've been trying to create a jquery function that will toogle values for all selects in a table row. I've come up with this sollution
$(function () {
$(".toogle").click(function () {
if ($(this).hasClass("on") === true) {
$(this).addClass("off");
$(this).removeClass("on");
} else {
$(this).addClass("on");
$(this).removeClass("off");
}
$(this).each(function () {
if ($(this).hasClass("on") === true) {
$(this).closest('tr').find('select').each(function () {
$(this).val("1");
});
} else {
$(this).closest('tr').find('select').each(function () {
$(this).val("0");
});
}
});
});
});
You can see the full code here: http://jsfiddle.net/7BZNe/
but would like to know if it could be done in a better way.

Lots of room for simplifying here:
http://jsfiddle.net/zt974/
$(".toogle").click(function () {
$(this)
.toggleClass("on off")
.closest('tr')
.find('select')
.val($(this).hasClass("on") ? "1" : "0");
});

How to add a class to a div on load?

Here's what I'm using
$(document).ready(function() {
$(".accept").change(function () {
if ($(this).val() == "0") {
$(".generateBtn").addClass("disable");
} else {
$(".generateBtn").remove("disable");
}
});
});
It works after you change the value, but how do I add the style to the div on load to disable?
Do I simpily juse call
$(".generateBtn").addClass("disable");
Or is there a more elegant technique

How about just triggering a change ?
$(document).ready(function() {
$(".accept").on('change', function () {
if ($(this).val() == "0") {
$(".generateBtn").addClass("disable");
} else {
$(".generateBtn").remove("disable");
}
}).trigger('change');
});
I'm guessing you meant to write removeClass and not remove, if so :
$(document).ready(function() {
$(".accept").on('change', function () {
$(".generateBtn").toggleClass('disable', this.value=='0');
}).trigger('change');
});

Easy modification to jQuery code to make use of more than one textbox

How to change the following code to make use of all my 4 textboxes with id extra1, extra2,persons and tables?
$(document).ready(function () {
$('#extra1').blur(function () {
if ($.trim(this.value) == "") {
$('#btnUpdate').attr("disabled", true);
}
else {
$('#btnUpdate').removeAttr("disabled");
}
});
});

$('#extra1').blur(function () {
to
$('#extra1, #extra2, #persons, #tables').blur(function () {

The code modification would be:
$(document).ready(function () {
$('#extra1, #extra2, #persons, #tables').blur(function () {
if ($.trim(this.value) == "") {
$('#btnUpdate').attr("disabled", true);
}
else {
$('#btnUpdate').removeAttr("disabled");
}
});
});
But, why not give all of them a class, and use that class as the selector? That way, you can easily add elements later without changing your Javascript.

Use jQuery delegate which will bind only one event handler but will act only on the element which triggers the event. Try this
Wokring demo
$(document).ready(function () {
$('formSelector').delegate('input[type=text]', 'blur', function () {
if ($.trim(this.value) == "") {
$('#btnUpdate').attr("disabled", true);
}
else {
$('#btnUpdate').removeAttr("disabled");
}
});
});