Question

我正在尝试使用jquery动态更改第二个选择列表中的选项，具体取决于选择第一个选择列表中的哪个项目。

第二个选择列表中还需要包含optgroup。

我将如何做到这一点？

由于

Answer 1

有一些插件可以做到这一点。搜索链接的选择列表。

可在此处找到一个示例http://manuel.radiohead.cl/proyectos/jquery/popdrodown/

Answer 2

以下是使用JSON作为数据交换格式的示例。您可以使用XML，JSON，HTML甚至传递javascript进行评估。

PHP：

$searchParam = $_GET['SEARCH_PARAM'];

//Get the matching results for the secondselect from your database
$results = $DB->query('Select ID, NAME, GROUP from mytable where parent = ?', $searchParam); 

//If you're using a PHP 5.2 or a newer version you have the json_encode function
print json_encode($results);

HTML：

<select id="firstselect" onchange="myfunc();">
  <option value="">Select one...</option>
  <option value="1">One option</option>
  <option value="2">Second choice</option>
</select>

<select id="secondselect"></select>

使用Javascript：

function myfunc() {
  var value = $("#firstselect").val();
  $.get("myjsonprovider.php", 
    {SEARCH_PARAM: value },
    dataType: "JSON",
    function(data) {
      var options = '<option value="">Select one...</option>';
      var optgroup = data[0].GROUP;
      options += '<optgroup label="' + data[i].GROUP + '">';
      for(var i = 0; i < data.length; i++) {
        if(optgroup != data[i].GROUP) {
          options += '</optgroup><optgroup label="'+data[i].GROUP+'">';
        }
        options += '<option value="' + records[i].ID +'">'+data[i].NAME+'</option>';
      }
      options += '</optgroup>';
      $("#secondselect").html(options);
    }
  );

}

如何使用jquery根据第一个选定的选项填充第二个选择列表

2 个答案: