Как реализовать JQuery val () для пролета?

Question

У меня есть несколько выбранных элементов, которые сгруппированы по промежутку. Я создаю плагин для взаимодействия с элементами. Теперь я хотел бы дать моим пользователям поддержку функции val(), чтобы они могли получить или установить «значение» моего диапазона. Установка значения приведет к изменению элемента select box, а получение значения приведет к добавлению значений 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>

Challange
Получите следующий код для работы: $('#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

Вы можете использовать функцию .text () JQuery вместо .val () функции JQuery, чтобы изменить свой диапазон.

Answer 3

Я не думаю, что это хорошая идея - связываться с 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 4

Посмотрите на плагин jquery InputMask .Они сохраняют оригинальную функцию jquery val() в переменной и заменяют ее собственной.Затем вы сначала получите вызов, вы можете проверить, является ли элемент span, и если это так, вернуть его , иначе вызвать исходную функцию .

var originalVal = $.fn.val;

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

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