Select with options dependent of PHP Array

Question

I have list select:

<select id="sel">
  <option id="a1" value="volvo">Volvo</option>
  <option id="a2" value="saab">Saab</option>
  <option id="a3" value="mercedes">Mercedes</option>
  <option id="a4" value="audi">Audi</option>
  <option id="a5" value="volvo2">Volvo2</option>
  <option id="a6" value="saab2">Saab2</option>
  <option id="a7" value="mercedes2">Mercedes2</option>
  <option id="a8" value="audi2">Audi2</option>
</select>

and in PHP i have array:

$array = array('a1', 'a4', 'a5', 'a8');

How to with jQuery show in select #sel only values where id option is isset in $array of PHP?

For this example should be:

<select id="sel">
  <option id="a1" value="volvo">Volvo</option>
  <option id="a4" value="audi">Audi</option>
  <option id="a5" value="volvo2">Volvo2</option>
  <option id="a8" value="audi2">Audi2</option>
</select>

http://jsfiddle.net/TZCcA/

I dont want use PHP for this. I would like use jQuery. Thanks!

If you don't want to use PHP for this, then you first need to remove the PHP array and use a javascript array instead. — hakre
– hakre, Commented Mar 15, 2012 at 15:36

ShankarSangoli · Accepted Answer · 2012-03-15 15:36:03Z

2

Using the php array you can generate the selector like this and remove or hide unwanted options.

You can render the array or selector('#a1, #a4, #a5, #a8') itself from server side and use it on the client side.

$('select option').not('#a1, #a4, #a5, #a8').remove();

If its an array you can try this.

$('select option').not('#' + array.join(',#')).remove();

Working demo - http://jsfiddle.net/TZCcA/1/

answered Mar 15, 2012 at 15:36

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

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

1 Comment

Basti Over a year ago

echo '#'.implode(', #', array('a1', 'a4', 'a5', 'a8')); will generate the string for your first example. echo json_encode(array('a1', 'a4', 'a5', 'a8')) the array for your second one.

j08691 · Accepted Answer · 2012-03-15 15:42:18Z

1

You can do this but you'll need to echo your PHP array to the page so that jQuery can use it.

jQuery:

var ary = ['a1', 'a4', 'a5', 'a8']; // output your PHP array here
$('option').each(function() {
    if ($.inArray($(this).attr('id'), ary)==-1) $(this).remove();
})

And you'd want to echo your PHP array in the jQuery array definition. Something like this:

var ary = [
<?php
foreach($item in $array){
    echo "'$item',";
}
?>
];

Note that this will add an extra comma at the end which you do not want. Removing that with a loop is trivial however I did not add that to this code.

jsFiddle example (without the PHP).

answered Mar 15, 2012 at 15:42

j08691

208k33 gold badges269 silver badges281 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 10:25:24Z

You would first need to spit your array out into a usable format so that jQuery can access its values. I would suggest using json_encode for this.

echo json_encode( array('a1', 'a4', 'a5', 'a8') );

The output will be:

["a1","a4","a5","a8"]

So it's best if you assign that to a variable. Following that, you would cycle through your list and hide any elements not found within your array:

// Our array from PHP
var myArr = ["a1","a4","a5","a8"];
// Select all options, and filter
$("#sel option").filter(function(){
  // Return items not found in our array
  return $.inArray( this.id, myArr ) === -1;
}).remove();

Working demo at: http://jsbin.com/ocebup/edit#javascript,html

ShankarSongoli had a great solution as well, which doesn't require a filter, but rather modifies the array of values into a selector and passes it into the $.not() method. See their answer for the code: https://stackoverflow.com/a/9723034/54680

Collectives™ on Stack Overflow

Select with options dependent of PHP Array

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related