jQuery selectable() elements update values

Posted by Josh on Stack Overflow See other posts from Stack Overflow or by Josh
Published on 2010-04-30T16:45:53Z Indexed on 2010/04/30 16:47 UTC
Read the original article Hit count: 235

Filed under:
|
|

Basically what I'm trying to do is update the value attribute of a hidden input field contained within the selected element when the selectable() UI stops running.

If the element is selected, then the input's value should be the name attribute of that particular LI, whereas if the element is not selected, the value should be updated as empty.

HTML Sample:

<ul id="selector">
    <li class="networkicon shr-digg" name="shr-digg">
        <div></div>
        <label>Digg</label>
        <input type="hidden" value="" name="bookmark[]" />
    </li>
    <li class="networkicon shr-reddit" name="shr-reddit">
        <div></div>
        <label>Reddit</label>
        <input type="hidden" value="" name="bookmark[]" />
    </li>
    <li class="networkicon shr-newsvine" name="shr-newsvine">
        <div></div>
        <label>Newsvine</label>
        <input type="hidden" value="" name="bookmark[]" />
    </li>
</ul>

Script Sample:

$(function() {
    $("#selector").selectable({ 
        filter: 'li',
        selected: function(event, ui) {
            $(".ui-selected").each(obj, function() {
                $(this).children('input').val($(this).attr('name'));
            });
        },
        unselected: function(event, ui) {
            $(".ui-selected").each(obj, function() {
                $(this).children('input').val('');
            });
        }
    });
});

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about selectable