Passing an array via HTML select with Jquery

Question

Is this possible:

I am using an Ajax call to grab some results of a SQL query. The results are returns in an array which I echo as JSON at the end of a PHP script (which the ajax calls).

Then for each row of the sql result I am using 'append' to add an option to an html select as follows:

$.ajax({
     type: "POST",
     dataType: "json",
     url: "DoSQL.php",
     data: dataString,
     success:function(reply){

          $.each(reply, function(x, row){

               $('#mySel').append($('<option>', {value: row, text:'Some text'}));

          });

     });

As you can see I am giving the value of the select option an array. Then I am detecting when the select is changed, but the value is returned as an object. Can I pass the array as the value and if so how do I access its contents:

$("#mySel").change(function(){

 var result=$('#matchSel').val();

 alert(result);

})

Thanks in advance,

Alan.

EDIT: 'fixture' was an error, it should be 'row'. I have corrected my example code above. I'm trying to return the result of the mysql query to the html select.

EDIT: Here is the PHP code as requesteD:

$query="SELECT * FROM `table1`";

$result=$mysqli->query($query);

while($row=$result->fetch_array(MYSQLI_ASSOC)){

     $res[]=$row;

}

$mysqli->close();

echo json_encode($res);

So the array $res is what is returned as reply and then assigned to row

You can store an array in option by making it a string separated by a ny separator.when you select that option again parse this string into array using js. like <option value="x,y,z">xyzf</option> — developerCK
– developerCK, Commented Jul 30, 2013 at 17:40
You have syntax errors in your append and we need to know where "fixture" declared and assigned a value — omma2289
– omma2289, Commented Jul 30, 2013 at 17:48

Sushanth -- · Accepted Answer · 2013-07-30 17:40:38Z

1

This way of attaching event will not work as it's a Dynamically added element

$("#mySel").change(function() {

You need to delegate the event

$(document).on("change", "#mySel", function(){

If fixture is an array instance here. You can use the index of the array which is x argument

 value: fixture[x],

answered Jul 30, 2013 at 17:40

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

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

Comments

samsquanch · Accepted Answer · 2013-07-30 17:42:07Z

0

I'm not entirely sure I understand your question, but your last code block makes it seem like you are asking how to get at the item selected? :

var result=$('select.foo option:selected').val();

If not please clarify.

answered Jul 30, 2013 at 17:42

samsquanch

5313 silver badges12 bronze badges

1 Comment

Alan A Over a year ago

yes that's what I am trying to do, my code enables me to select the data but I get an object, I'm not sure if I have to Jsno decode?

Alan A · Accepted Answer · 2013-07-30 19:28:40Z

0

Ok I figured it out. MY php script was only echoing the JSON response back to the Jscript, in order to pass the array I had to encode it implicitly with JSON:

var temp=JSON.stringify(fixture);

$('#mySel').append($('<option>', {value: temp, text:'my text'}));

Then I decode the JSon when the select is made:

$("#mySel").change(function(){

     var obj=jQuery.parseJSON($('#mySel').val());    

})

Thanks for th hints and letting me think aloud!

Alan

answered Jul 30, 2013 at 19:28

Alan A

2,5516 gold badges34 silver badges55 bronze badges

Collectives™ on Stack Overflow

Passing an array via HTML select with Jquery

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related