Question

可能重复：
display dropdown values based on previous dropdown

我非常了解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 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答案！

关于html形式的东西noob

2 个答案: