passing array to <option> with jQuery

Question

I'm making a custom multiselect option box and I need to pass an array of selected values to the element

var data=[];
$(".opt > div").click(function(){
  data[data.length]=$(this).attr("value");
  $(".options").val(data);  // putting data into custom option
});

HTML

<div class="wrapper"> <!-- own custom style -->
  <select class="options"> <!-- select is hidden with CSS -->
    <!-- options -->
  </select>
</div>

<div class="opt"> <!-- this div is dynamically created by clicking         no class wrapper and populated the inside with select box's options with jQuery -->
  <div value="0">item 1</div>
  <div value="1">item 2</div> 
  <div value="2">item 3</div> 
</div>

Everything is going well But on click event I want to value .option class with array 'data' and pass it via It's form on submit as request. How to set array (data) as It's value?

Like in checkbox, giving name like name="somename[]" makes the response an array. Or an

the above code is just a brief demonstration of What I want

You should take the problem in reverse. Make your select with its options in the html. Then hide it with CSS, and dynamicly construct the "custom multiselect" with jQuery. Don't forget to add the multiple attribute to your select : <select multiple="multiple"> — Brewal
– Brewal, Commented Aug 28, 2013 at 12:34

Roger Barreto · Accepted Answer · 2013-08-28 12:51:52Z

First, make your select multi and give it a name:

<select name="cmbSomeName" class="options" multiple="multiple">

Second, on the click, reset your select options and reselect select all that are in the data array.

var data=[];
$(".opt > div").click(function(){
   data[data.length]=$(this).attr('value');

   //Unselect all the options
   $('.options option').each(function(){ this.selected = false; })

   //For each item in data, select the respective option in the select
   $.each(data, function(){
      $('.options options[value="' + this + '"]').prop('selected', true);
   });
});

Finally, when you submits your form, the cmbSomeName will be an array in the server side

Its important to note that this code will always increase the data[] array, so, you will not be enable to "unselect" those itens, for such, I would do diferent coding like so:

 $(".opt > div").click(function(){
      jqOption = $('.options options[value="' + $(this).attr('value') + '"]');

      //Toggle (if true then false else true)
      jqOption.prop('selected', !jqOption.prop('selected'));
 })

Manu M · Accepted Answer · 2013-08-28 12:19:23Z

0

Use,

$(".options").append(data);

Dont use value for writing html

answered Aug 28, 2013 at 12:19

Manu M

1,0645 silver badges18 bronze badges

3 Comments

Ario Over a year ago

I'm not writing HTML, I'm trying to value the <select> with jQuery as it naturally happens in normal <select> box

Brewal Over a year ago

@Ario That's not how a <select> works. The value is contained in <option> elements in it.

Ario Over a year ago

But I made the same thing for a single value

Roko C. Buljan · Accepted Answer · 2013-08-28 13:31:07Z

0

DEMO

The trick is to:

Clone the select options
Put them inside a DIV (ok, who cares, it works beautifully)
target the original Select element on DIV click:

<div class="wrapper"> <!-- note! it wraps the select and the .opt -->
  <select class="options" multiple>
    <option value="0">Item 1</option>
    <option value="1">Item 2</option>
    <option value="2">Item 3</option>
  </select>
  <div class="opt"></div> <!-- will be populated by jQ -->
</div>

$('.options').each(function(){ 
  $(this).next('.opt').html($(this).html());
});

$('.opt').on('click', 'option', function(){
  $(this).toggleClass('selected')
         .parent().prev('select')
         .find('option[value='+ this.value +']')[0].selected ^= 1;
});

with this basic CSS:

.opt option{
  background:#eee;
  border-bottom:1px solid #888;
  cursor:pointer;
}
.opt option:hover{
  background:#ddd;
}
.opt option.selected{
  background:#cf5;
}

edited Aug 28, 2013 at 13:31

answered Aug 28, 2013 at 12:26

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

7 Comments

Ario Over a year ago

yes But I want to pass multiple values. Like value 0 and 1 together

The Dark Knight Over a year ago

@Ario : Do you mean 0 and item1 or (1 and item2 )?

Ario Over a year ago

I mean value 0 and 1 (of attribute data-value)

Roko C. Buljan Over a year ago

@Ario than you don't want a select dropdown :) cause that's not how <select> works... Or I understand your question totally wrong ...

Roko C. Buljan Over a year ago

@Ario you want actually a select multiple, right? Cause in yout HTML example you did not stated that it's a multiple as attribute

|

Collectives™ on Stack Overflow

passing array to <option> with jQuery

3 Answers 3

Comments

3 Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related