如何为span实现jQuery val()

Question

我有一些按span分组的选择元素。我正在创建一个插件来与元素进行一些交互。现在我想给我的用户val()函数的支持，这样他们就能够获得或设置我的跨度的"值"。设置该值将导致selectbox元素发生变化，而获取该值将导致添加selectbox值。

基本上我希望我的插件添加对val()方法的支持。对如何实现这一点有什么想法吗?

<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>

挑战
让下面的代码工作:$('#test').val('1:1');和$('#test').val()。

Answer 1

这不是一个完整的插件，我没有覆盖val()，但它应该做你想做的。

$.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());
});

你可以试试http://jsfiddle.net/QBSWm/1/

Answer 2

我不认为像这样乱搞jQuery是个好主意，而且可能会有一些输入错误，但是你可以这样做:

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); }});
});

Answer 3

看看InputMask jquery插件。他们所做的是将原来的jquery val()函数存储在一个变量中，并用自己的函数替换它。然后您将首先收到调用，您可以检查元素是否为span，如果是，则返回，否则调用原始函数。

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

Answer 4

你可以使用。text() JQuery函数来代替。val() JQuery函数来改变你的span

Answer 5

重写.val()不是一个好主意，但如果您真的想要一个类似.val()的span方法，您可以添加以下代码:

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

，然后，使用它，就像。val():

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