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;
}
});
});
});
Related
I'm going to have 5 sets of select dropdowns with the same details in all 10 menus. They're going to be in pairs and if in any of the pairs you choose one of the options, the other select box has the option disabled.
I've got the following
$(document).ready(function () {
$('select').change(function () {
$('select.fix1 option').attr('disabled', false);
$('select.fix1').each(function() {
var val = $(this).find('option:selected').val();
if (!val) return;
$('select.fix1 option').filter(function() {
return $(this).val() == val;
}).attr('disabled', 'disabled');
});
});
});
Which applies the rule perfectly to 2 dropdowns, but how can I apply it to the fix1, fix2, fix3, fix4 and fix5 pairings without repeating the code 5 times?
For jQuery selectors you can combine multiple selectors with comma ( like css-seletors ):
$(document).ready(function () {
$('select').change(function () {
$('select.fix1 option, select.fix2 option, select.fix3 option').attr('disabled', false);
$('select.fix1,select.fix2,select.fix3').each(function(key, el) {
var val = $(this).find('option:selected').val();
if (!val) return;
$(el).find('option').filter(function() {
return $(this).val() == val;
}).attr('disabled', 'disabled');
});
});
});
But it's better to have some commot class to right selector only once like
$(document).ready(function () {
$('select').change(function () {
$('select.commonClass option').attr('disabled', false);
$('select.commonClass').each(function(key, el) {
var val = $(this).find('option:selected').val();
if (!val) return;
$(el).find('option').filter(function() {
return $(this).val() == val;
}).attr('disabled', 'disabled');
});
});
});
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");
});
$(document).ready(function () {
$("#btnhighlight").click(function () {
var htext = $("#txthighlighttext").val();
if (htext == '') {
alert("Pleae enter the search item.");
return false;
}
$("#lstCodelist option").each(function () {
$(this).removeClass('searchItem');
if ($(this).text().search(htext) != -1) {
$(this).addClass('searchItem');
}
});
});
});
Lets take I have a row something like this
I love to work with Jquery.
If I enter my search text as jquery its not highlighting Jquery. But my query should work in both they way regardless of CAPS or SMALL letters.
how to change my code to work like that.
thanks for your all help.
use .toUpperCase() ............. // or lowerCase
if ($(this).text().toUpperCase().indexOf(htext.toUpperCase()) != -1) {
This one should work, I believe:
$(document).ready(function () {
$("#btnhighlight").click(function() {
var htext = $("#txthighlighttext").val().toLowerCase();
if (htext === '') {
alert("Please enter the search item.");
return false;
}
$("#lstCodelist option").each(function() {
var $this = $(this);
if ($this.text().toLowerCase().indexOf(htext) !== -1) {
$this.addClass('searchItem');
} else {
$this.removeClass('searchItem');
}
});
});
});
Sidenote: indexOf is proven to be faster than search.
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");
}
});
});
I am designing a html page.
I want to show a confirmation msg on changing a drop down element using jquery or javascript.
Please help to do this.
I have code which will ask confirmation. On selecting cancel it will not select previous item of Drop down.
$("#dropdownId").change(function(e)
{
if($(this).val() == "40")
{
if(confirm("Are you sure"))
return true;
else
return false;
}
});
Thanks
You should be able to store the previous value on the click event and set it back on the change event:
var setLastSelected = function(element) {
$(element).data('lastSelected', $(element).find("option:selected"));
};
$("select").each(function () {
setLastSelected(this);
});
$("select").change(function(){
if(confirm("Are you sure")) {
setLastSelected(this);
return true;
}
else {
$(this).data('lastSelected').attr("selected", true);
return false;
}
});
See: http://jsfiddle.net/w9JYX/14/
Update: I updated the code to work more generically on a set of dropdown controls and also removed the click handler.
Here's a bit tighter solution along the same lines without having to create global variables or other functions:
$('#dropdownId')
.on('focus', function () {
$(this).data("prev", $(this).val());
})
.change(function () {
if (confirm('Are you sure?')) {
//normal case where the dropdown changes
$(this).data("prev", $(this).val());
} else {
//if the user doesn't confirm reset the dropdown back to what it was
$(this).val($(this).data("prev"));
}
});
var previous_option = $('#dropdownId option:selected');
$("#dropdownId").change(function(e){
var $this = $(this),
selected = $this.find('option:selected');
if($this.val() == "40"){
if(confirm("Are you sure")){
previous_option = selected;
return true;
} else{
selected.removeAttr('selected');
previous_option.attr('selected', 'selected');
}
} else{
previous_option = selected;
}
});
Usage for ASP.NET page:
$("#<%= dropdownId.ClientID %>")
.on('focus', function () {
$(this).data("prev", $(this).val());
})
.change(function () {
if (confirm('Are you sure?')) {
$(this).data("prev", $(this).val());
} else {
$(this).val($(this).data("prev"));
}
});