Category Archives: jquery

JQuery: working with select options

We are going to start with the next simple html code

[html]

[/html]

How to get selected value

[javascript]
$(‘#opt option:selected’).val();
[/javascript]

How to get selected text

[javascript]
$(‘#opt option:selected’).text();
[/javascript]

How to set option by value

[javascript]
$(‘select#opt option[value=1]‘).attr(‘selected’,'selected’);
[/javascript]

If we need to set selected option by variable consider next code

[javascript]
var index = 1;
$(‘select#opt option[value=' + index +']‘).attr(‘selected’,'selected’);
[/javascript]

Next code might be applied if we need to set selected option by index

[javascript]
var content=”Boys”;
$(‘#opt option:contains(“‘+content+’”)’).attr(‘selected’,'selected’);
[/javascript]

Result: first option will be selected

One more piece of code to review:
[javascript]
$(‘select#optn_status option[value=4]‘).attr(‘disabled’, ‘disabled’);
[/javascript]

How to open links in new window with JQuery

How to open links in new window with JQuery

It is very simple code.
Just have a look and enjoy!

[javascript]

$(document).ready(function() {
$("a[@href^=http]").click(function(){ //find the links pointing to a URL
if(this.href.indexOf(location.hostname) == -1) { //check if they point outside
window.open( $(this).attr(‘href’) ); //force open the new window return false;
}
});

});

[/javascript]

Include JQuery UI framework from Google libs

Code snippet to include JQuery UI framework from Google libs

[javascript]
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
</head>
[/javascript]

How to impose maxlength on textArea using JQuery

How to impose maxlength on textArea using JQuery


$(function() {

// Get all textareas that have a “maxlength” property.
$(‘textarea[maxlength]‘).each(function() {

    // Store the jQuery object to be more efficient...
    var $textarea = $(this);

    // Store the maxlength and value of the field.
    var maxlength = $textarea.attr('maxlength');
    var val = $textarea.val();

    // Trim the field if it has content over the maxlength.
    $textarea.val(val.slice(0, maxlength));

    // Bind the trimming behavior to the "keyup" event.
    $textarea.bind('keyup', function() {
        $textarea.val($textarea.val.slice(0, maxlength));
    });

});

});

Best solution

[javascript]
window.onload = function() {
var txts = document.getElementsByTagName(‘TEXTAREA’)

for(var i = 0, l = txts.length; i < l; i++) {
if(/^[0-9]+$/.test(txts[i].getAttribute("maxlength"))) {
var func = function() {
var len = parseInt(this.getAttribute("maxlength"), 10);

if(this.value.length > len) {
alert(‘Maximum length exceeded: ‘ + len);
this.value = this.value.substr(0, len);
return false;
}
}

txts[i].onkeyup = func;
txts[i].onblur = func;
}
}
}

[/javascript]