JQuery Multi-Select with multiple values

Question

I have a form where you select a location, this location has a zip code tied to it and is captured in the data-foo value. What I need is an array built upon multiple locations being selected.

An example would be if both would be selected I'd have 65807 => 71118

Form:

<form enctype='multipart/form-data' role='form' action='' method='post'>	
		<div class="row">
			<div class="col-md-3">
				<div class='form-group'>							
					<label for='select'>Destination(s)&nbsp;</label>
						<select name='destination[]' style='height: 200px;' multiple class='form-control'  multiple='multiple' id='destination' style='lane'>";
							<option value='Springfield' data-foo='65807'>Springfield, MO</option>
							<option value='Shreveport' data-foo='71118'>Shreveport, LA</option>
						</select>
				</div>
			</div>
		</div>
</form>

What I have so far for JS:

$(function(){
    $('#origin').change(function(){
        var selected = $(this).find('option:selected');
       $('#origin_zip').html(selected.data('foo')); 
    }).change();
});

$('#destination').change(function() {
    $('#destination_zip').text('');
    
    var selected = $('#destination').val();
    for (var i = 0; i < selected.data; i++) {
       $('#destination_zip').data($('#destination_zip').data('data-foo') + selected[i]);
    }
});

EDIT:

This is the code that works on building the array with the text, but not the data-foo that I need.

$('#destination').change(function() {
    $('#destination_zip').text('');
    
    var selected = $('#destination').val();
    for (var i = 0; i < selected.length; i++) {
       $('#destination_zip').text($('#destination_zip').text() + selected[i]);
    }
});

So you want the user to be able to select multiple locations? A Select Option menu only allows ONE option to be selected. I think you want check boxes or radio buttons. And the example you gave is in the form a key value which isn't available in javascript. You could build a json object that way though. — floor
– floor, Commented Feb 6, 2015 at 22:48
I can have it build an array based upon .text using .val() already.. I just need to change the .text to a form of .data — Jeff Beagley
– Jeff Beagley, Commented Feb 6, 2015 at 22:50
Not sure what you want to do here... what is the difference between .text and .data? — TRGWII
– TRGWII, Commented Feb 6, 2015 at 22:52
I've updated original post with the code that works for the text only. — Jeff Beagley
– Jeff Beagley, Commented Feb 6, 2015 at 22:52
To TRGWII - I need to pull the zip code which is held in data-foo, but have the user select by City, St. — Jeff Beagley
– Jeff Beagley, Commented Feb 6, 2015 at 22:53

dsgriffin · Accepted Answer · 2015-02-06 23:14:02Z

1

The following could be used:

$('#destination').change(function() { // Whenever the select is changed
    var arr = []; // Create an array
    $('#destination option:selected').each(function(){ // For each selected location
        arr.push($(this).data("foo")); // Push its ZIP to the array
    });
    console.log(arr); // will include the ZIP code(s) of selected location(s).
});

jsFiddle example here

edited Feb 6, 2015 at 23:14

answered Feb 6, 2015 at 23:00

dsgriffin

68.8k17 gold badges141 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

TRGWII · Accepted Answer · 2015-02-06 23:01:00Z

0

Something like this? (kind of ugly, I know)

$('#destination').change(function() {
  var selected = [];
  for(i = 0; i < $('#destination').children().length; i++){
    selected[i] = $($('#destination').children()[i]).data('foo');
  }
  console.log(selected);
});

Edit: nevermind, look at @dsg's answer

answered Feb 6, 2015 at 23:01

TRGWII

6485 silver badges14 bronze badges

Collectives™ on Stack Overflow

JQuery Multi-Select with multiple values

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related