fetch values of select elements as query string array

Question

i am fetching all the values from select element, which will not have selected attribute using this piece of jquery code.

$('#purchaseEditUpdateItemBtn').on('click', function(){
    var selected = [];
    $('#box2View option').each(function(index, element){ 
        selected[index] = $(element).val(); 
    });
    return false;
});

here is my select box.

 <select id="box2View" multiple="multiple" class="multiple">
     <option value="1">ITEM001</option>
     <option value="2">ITEM002</option>
     <option value="3">ITEM003</option>
     <option value="4">ITEM004</option>
 </select>

this will create a javascript array named selected and hold the values as an array.i want to fetch all the values from option and emulate the query like this.

estimate_id[]=1&estimate_id[]=2&estimate_id[]=3&estimate_id[]=4

so that it is received by server side as an array.

P.S: please note that, i want to fetch all the elements from select elements without user selecting any, so for the reason, selected attribute is not used. i tried using serialize() which didn't work because serialize() requires the elements to be selected, which cannot be true in my case.

thank you

tobias86 · Accepted Answer · 2012-07-23 09:46:56Z

2

You could try something like this:

$('#purchaseEditUpdateItemBtn').click(function(){
    var selected = [];
    $('#box2View option').each(function(index, element){ 
        selected[index] = 'estimate_id[]=' + $(element).val(); 
    });
    alert(selected.join('&')); 
    return false;
});

Not sure if this is the most elegant way. It uses simple string concatenation via the Array.join function.

answered Jul 23, 2012 at 9:46

tobias86

5,0291 gold badge23 silver badges31 bronze badges

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

Comments

gaurang171 · Accepted Answer · 2012-07-23 12:37:36Z

For above issue, i have done complete bin. so, please check demo on http://codebins.com/bin/4ldqp9x

HTML:

<select id="box2View" name="box2View" multiple="multiple" class="multiple">
  <option value="1">
    ITEM001
  </option>
  <option value="2">
    ITEM002
  </option>
  <option value="3">
    ITEM003
  </option>
  <option value="4">
    ITEM004
  </option>
  <option value="5">
    ITEM005
  </option>
  <option value="6">
    ITEM006
  </option>
  <option value="7">
    ITEM007
  </option>
</select>
<p>
  <input type="button" id="purchaseEditUpdateItemBtn" name="purchaseEditUpdateItemBtn" value="Show Items" />
</p>

JQuery:

$(function() {
    $('#purchaseEditUpdateItemBtn').on('click', function() {
        var selected = new Array();
        var i = 0;
        $('#box2View option').each(function(index, element) {
            if ($(this).is(":selected")) {
                selected[i] = "box2View[]=" + $(element).val();
                i++;
            }
        });
        if (selected.length > 0) {
            alert(selected.join('&'));
        }
        return false;
    });
});

Collectives™ on Stack Overflow

fetch values of select elements as query string array

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