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

Posted 2023-03-05

【中文标题】如何检测下拉列表的选定值

【英文标题】：How to detect the selected value of a dropdown

【发布时间】：2011-01-21 20:49:16

【问题描述】：

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

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

【问题讨论】：

*** 对 html 代码非常满意，您可以从下面的答案中看到。

另外，我不确定您在伪代码中的确切含义，但您不能真正将按钮放在 <select> 元素的中间。

对不起，我的意思是把 放在 之外。关于html代码，我老实说尝试了一下，但它没有显示出来。所以我必须使用 [] 而不是 。但是哦，好吧，我一定做错了什么。

重要提示：您一直在错误地谈论“组合框”。这不是组合框。这是一个下拉列表（或列表框，你喜欢什么）。组合框是一个可编辑 下拉菜单。我已相应地编辑了您的问题。

顺便说一句：我之前已经详细回答过类似的问题：***.com/questions/2263996/…

【参考方案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 处理脚本中执行类似的操作：

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

【讨论】：

太棒了，你认为你可以帮助我更进一步。假设当我从组合框 1 中选择一个项目时，我想将项目 1、2、3 插入组合框 2 作为其选项。你认为你可以告诉我怎么做。不胜感激。 TYVM

@Harry Pham：我已经更新了我的答案，请看底部，希望你能明白。谢谢再见

那一定是我点击了错误的按钮。我刚刚修好了。对不起。顺便说一句，我正在编写 jsp 代码，所以不确定你的 php 语法。我希望你能帮助一些 jsp 代码...tyvm 和 srry 关于降级投票

-1 用于强制事件注册。您已经在使用 jQuery，正确地使用它非常容易。

@Harry Pham：没关系，php代码没什么特别的，它只是创建了一个变量，然后将选项标签分配给该变量，最终返回。

【参考方案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/

希望你能明白。

【讨论】：

阅读您的代码以及 BalusC 代码，我对如何做到这一点有了一个很好的想法。虽然不是jsp，但代码的结构是正确的，所以我会让你的答案成为正确的答案。 tyvm