Question

当我从第一个下拉列表中选择一个项目时，将启动一个ajax事件，调用另一个函数并将信息加载到第二个下拉列表。我不想要这个（请不要按钮解决方案）

<select id=combo1>
   <option>...</option>
   ...  
</select>
<input type=button onclick="loadCombo2()">

Answer 1

你可以这样做：

<select id="combo1" onchange="requestSend(this.value);">
options..........
</select>

<select id="combo2">
options...........
</select>


<script>
  function requestSend(txt)
  {
     $.ajax({
      url:'process.jsp',
      data: "v=" + txt,
      cache:false,
      success: function(response){
       $("#combo2").val(response);
      }
     });
  }
</script>

...

填充Combo2选项：

要填充combo2选项，您需要在处理ajax请求的脚本中创建它们，例如在php中（我不知道您使用的是哪种语言），我将在ajax处理脚本中执行以下操作：< / p>

// db queries to get data or whatever
// create a variable that will hold options and shown in combo2

$options = '<option value="whatever">whatever</option>' . "\n";
$options .= '<option value="whatever">whatever</option>' . "\n";
$options .= '<option value="whatever">whatever</option>' . "\n";
//........ etc

// Now we send back the $options variable which will populate the combo2
echo $options;

Answer 2

如果它是在ASP.NET中实现的，我会使用HTTP处理程序将JSON格式的数据返回到第二个组合框。

使用jQuery，您可以通过以下方式调用处理程序来实现级联：

$("#combo1").change(function()
{
    $("#combo2").html("");

    var valueSelected = $("#combo1").val();

    if (valueSelected != 0)
    {                 
        $.getJSON('LoadCombo2.ashx?valueSelected=' + valueSelected, function(returnedData)
        {
            $.each(returnedData, function()
            {                        
                $("#combo2").append($("<option></option>").val(this['ID']).html(this['Value']));

            });
        });
    }
});

要了解如何实现HTTP处理程序，请查看此帖子中的更完整的分步骤：
http://www.codedigest.com/Articles/jQuery/224_Building_Cascading_DropDownList_in_ASPNet_Using_jQuery_and_JSON.aspx

如果您不需要级联组合框，它会变得更容易。只需调用处理程序不传递任何参数，并在jQuery的回调函数中加载填充第二个组合框所需的任何数据。

http://api.jquery.com/jQuery.getJSON/

希望你明白这一点。

如何检测下拉列表的选定值

2 个答案: