How to implement jQuery val() for a span?

I have a few select elements that are grouped by a span. I'm creating a plugin to do some interaction with the elements. Now I would like to give my users the support of the val() function, so that they are able to get or set the 'value' of my span. Setting the value will result in the select box element to change en getting the value will result in the addition of the selectbox values.

Basically I would like my plugin to add the support for the val() method. Any ideas on how to implement this?

Code

<span id="test">
    <select id="one">
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
    <select id="two">
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
</span>

Challange

Get the following code to work: $('#test').val('1:1');开发者_StackOverflow and $('#test').val().

This is not a full plugin and I did not override val() but it should do what you want.

$.fn.value = function(value) {
    if (value) {
        var s = value.split(':');
        for ( var i = 0; i < s.length; i++ ) {
            this.find('select').eq(i).val(s[i]);
        }
    } else {
        var result = [];
        this.find('select').each( function( index, item ) {
            result.push($(item).val());
        });

        return result.join(':');

    }
}

$(function() {
    $("#test").value("2:2");
    alert($("#test").value());
});

You can try it at http://jsfiddle.net/QBSWm/1/

I don't think its a good idea to mess with jQuery like this, and there may be some typing errors, but here you go:

var oldVal = jQuery.fn.val;
jQuery.fn.extend({
    val: function(value) { 
        // replace class check below with something related to your span
        if (this.length == 1 && this.is('span.my-custom-class')) { 
            if (arguments.length == 0) {
                // below is just a sample, traverse 
                // child selects like in DanielB's answer
                // and return the value you expect
                return this.attr('justsomesample');                 
            }
            else {
               this.attr('justsomesample', value); 
               return this;
            }
        }; 
        return oldVal.apply(this, arguments); }});
});

Look at the InputMask jquery plugin. What they do is to store original jquery val() function in a variable and replace it with their own. Then you will receive the call first, you can check if the element is span, and if so return it otherwise call the original function.

var originalVal = $.fn.val;

$.fn.val = function(params){
   // if span then return your logic
   // otherwise call originalVal 
}

You can use the .text() JQuery function instead of .val() JQuery function to change your span.

It's not a good iead to override .val(), but if you really want a .val() like method for span, you could just add following code :

$.fn.sval = function(value) {
   if(!value)
       return $(this).html();
   else
       return $(this).html(value);
}

and then, to use it, just like .val() :

// Get value
alert($('#test').sval());
// Set value
$('#test').sval("yo");