选择依赖于 PHP 数组的选项答案

【问题标题】：Select with options dependent of PHP Array选择依赖于 PHP 数组的选项
【发布时间】：2012-04-01 03:35:00
【问题描述】：

我有列表选择：

<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>

在 PHP 中我有数组：

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

如何使用 jQuery 在选择 #sel 中仅显示在 PHP 的 $array 中设置了 id 选项的值？

对于这个例子应该是：

<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/

我不想为此使用 PHP。我想使用 jQuery。谢谢！

【问题讨论】：

如果您不想为此使用 PHP，那么您首先需要删除 PHP 数组并改用 javascript 数组。

标签： php javascript jquery html select

【解决方案1】：

使用 php 数组，您可以像这样生成选择器并删除或隐藏不需要的选项。

您可以从服务器端呈现数组或选择器（'#a1, #a4, #a5, #a8'）本身并在客户端使用它。

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

如果它是一个数组，你可以试试这个。

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

工作演示 - http://jsfiddle.net/TZCcA/1/

【讨论】：

echo '#'.implode(', #', array('a1', 'a4', 'a5', 'a8')); 将为您的第一个示例生成字符串。 echo json_encode(array('a1', 'a4', 'a5', 'a8')) 第二个数组。

【解决方案2】：

您可以这样做，但您需要将您的 PHP 数组回显到页面，以便 jQuery 可以使用它。

jQuery:

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

并且您希望在 jQuery 数组定义中回显您的 PHP 数组。像这样的：

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

请注意，这会在您不想要的末尾添加一个额外的逗号。用循环删除它是微不足道的，但我没有将它添加到这段代码中。

jsFiddle example（没有 PHP）。

【讨论】：

【解决方案3】：

您首先需要将您的数组转换为可用的格式，以便 jQuery 可以访问其值。我建议为此使用json_encode。

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

输出将是：

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

所以最好将它分配给一个变量。之后，您将循环浏览列表并隐藏数组中未找到的任何元素：

// 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();

工作演示：http://jsbin.com/ocebup/edit#javascript,html

ShankarSongoli 也有一个很好的解决方案，它不需要过滤器，而是将值数组修改为选择器并将其传递给 $.not() 方法。查看他们的代码答案：https://stackoverflow.com/a/9723034/54680

【讨论】：