javascript - How to implement jQuery val() for a span? - Stack Overflow

admin管理员组

文章数量:1404947

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'); and $('#test').val().

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'); and $('#test').val().

• javascript
• jquery
• dom
• jquery-plugins
• html

Share Improve this question Follow asked May 5, 2011 at 9:21 Kees C. BakkerKees C. Bakker 33.5k3131 gold badges118118 silver badges207207 bronze badges 3

• 1 I'm not sure whether it's a good idea to override val() (as you will have to fiddle with what the original .val() does) but +1 for an interesting question – Pekka Commented May 5, 2011 at 9:26
• Okay the main question is how to override val() not how to implement your specific task? – DanielB Commented May 5, 2011 at 9:48
• 1 @DanielB: true. I would like to override, support or otherwise implement the val() in my plugin. – Kees C. Bakker Commented May 5, 2011 at 9:52

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

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/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");

本文标签： javascriptHow to implement jQuery val() for a spanStack Overflow