html - 关于 html 表单的一些菜鸟

Question

可能重复：
根据先前的下拉菜单显示下拉菜单值

我非常了解 html 和表单，但想知道，例如：

单击某个下拉列表项时，会根据先前的字段选择出现第二个下拉列表。你会如何整合这个，我可以去一个特定的网站吗？

一个代码示例将不胜感激。我假设您可以为此使用javascript？您是检索特定值还是仅对特定选择使用不同的下拉列表

谢谢

Answer 1

我的头顶。

在提交表单之前，您将在页面上处理您的 javascript。

步骤 1. 在标题中引用 jquery 步骤 2. 加载时，隐藏第二个选择，将此脚本放在引用 jquery 下方

<script type="text/javascript">
$(function () {
   $("#secondselect").hide()

   $("#firstselect").change(function () {
            if($(this).val() != 0){
               $("#secondselect").show()
            }
            else
            {
                $("#secondselect").hide()
            }

        });
});
</script>


<select id="firstselect" name="firstselect" >
    <option value="0">first</option>
    <option value="1">second</option>
    <option value="2">third</option>
    <option value="3"></option>
</select>

<select id="secondselect" name="secondselect">
    <option value="0">first</option>
    <option value="1">second</option>
    <option value="2">third</option>
    <option value="3"></option>
</select>

在我的头顶......但我会这样做。

祝你好运。

哦...只是快速更新。

您可以使用开关而不是 if 这样，可能会更整洁...

从

if($(this).val() != 0){
               $("#secondselect").show()
            }
            else
            {
                $("#secondselect").hide()
            }

至

switch($(this).val())
{
    case '1':
       $("#secondselect").show();
    break;
    case '1':
       //do something else... show a third dropdown instead
       //for instance...
       // $("#thirdselect").show();
       alert('got to case 1');
       //or if you use firebug or chrome, right click and inspect an element then click on Console and this log report should show
       console.log('got here, showing the log');
    break;
    default:
       $("#secondselect").hide();

}

Answer 2

我从您的问题中假设您希望根据第一个下拉列表的选定值动态填充第二个下拉列表。

为此，您可以使用 jQuery 获取第一个选定值的值，将其传递给 PHP 文件，以获取第二个下拉列表需要的选项的响应并填充它们。

您还可以使用 .show() 和 .hide() 在需要时隐藏或显示下拉菜单。

$('#first').change(function(){
    var selected= $('#first').val();
    $.getJSON('data.php',{name: selected},function(data){
        var results='';
        $.each(data, function(i, item) {
            results += '<option value="'+item.Description+'">'+item.Description+'</option>"' ;
          });
          $("select#Second").html(results);

    })
 });

如果选项不需要动态更改而您只需要隐藏和显示，那么您可以使用 simpsons88 答案！