0

I'm trying to access a jQuery multi-select thing from my JavaScript code and am getting myself terribly confused. This simple example works fine, alerting with a comma-separated list of the checked items:

http://jsfiddle.net/smontanaro/d0Laxh6j/

Those values are produced with this bit:

$('[name=offset]').val()

but I don't understand the magic it invokes under the covers. Consequently, I'm having trouble generalizing that to a more useful example.

Consider a slightly different environment. I have a callback function with this structure:

function respond(button) {
    var form = button.form;
    ...
}

which is called from HTML like so:

<input type="button" value="Submit" onclick="respond(this); return false;">

If I use something like this:

var group = form.elements["offset"].value;

all I get is the first checked value. So, I've got my button and its form. As I understand it, neither are jQuery-specific objects, just plain old JavaScript objects. How do I get from them to a comma-separated string (or better yet, a list of strings) of checkbox values like the simple jsfiddle example yields?

3 Answers 3

2

You probably intended to write: DEMO

 <input type="button" value="Check Selections"
       onclick="alert($(':input[name=offset] :selected').map(function() { return this.value; }).get() ); return false;">

But I would advise strongly against inline JS. Therefore you would want to use:

<input type="submit" value="Check Selections">

and:

var values = $('select[name=offset] :selected').map(function() { 
    return this.value; 
}).get(); //array --> add .join(',') to get list
alert( values );

DEMO

Reference:

-- .map() | jQuery API Documentation

0

You can try this:

html

<select name="offset" class="multi" multiple="multiple">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option class="all" value="all">All</option>
    <option class="all" value="actual">Actual</option>
</select>
<input type="button" value="Check Selections" onclick="alert($('input[name=offset]:checked').val()); return false;">

js

$('.multi').multiselect();
$(".multi").on("change", function () {
    var val = $(this).map(function () {
        return $(this).val();
    }).get();
    console.log(val);
});

fiddle

Above example will work on change. For your case to get select values on button click you can try this:

$('.multi').multiselect();
window.getValues =  function() {
    var val = $(".multi").map(function () {
        return $(this).val();
    }).get();
    return val;
}

fiddle get values on click

0

there is some issue on the dhtml part, You may need to change your html part as like below

jsfiddle link

`http://jsfiddle.net/d0Laxh6j/6/`

<input type="button" value="Check Selections" onclick="alert($('[name=offset]').val());">

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.