Question

我正在创建HTML / PHP表单，我想在其中创建两个下拉列表。第一个应该一直可见，并且根据选择的内容，第二个应该显示出来。

我尝试了下面的代码以查看是否有效，但是由于某种原因，服务器向我显示＃500错误。尝试使用Google，但通常会找到一些Java代码，但不幸的是，我对此不太熟悉。

form.php

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <meta http-equiv='Content-Type' CONTENT='text/html; charset=utf-8'>
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name='GENERATOR'>
        <meta name='ProgId'>
        <SCRIPT>
            function makevisible(cur,which){
                if (which==0)
                    cur.filters.alpha.opacity=100
                else
                    cur.filters.alpha.opacity=50
            }
        </SCRIPT>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    </head>
    <body>
        <div class='form-item message-error' style='display: inline-block;' data-tooltip='Option'>
            <select size='1' id='selectornr01' class='form-text'>
                <option value='0' selected>Choose Option</option>
                <option value='1'>Option One</option>
                <option value='2'>Option Two</option>
            </select>
        </div>
        <div class='form-item message-error' style='display: inline-block;' data-tooltip='SubOption'>
            <select size='1' id='sub1' class='form-text'>
                <?php
                    if ($selectornr01 == 0) {
                        echo 'Choose Option' ;
                    }
                    elseif ($selectornr01 == 1) {
                        include('01_file.html') ;
                    }
                    else ($selectornr01 == 2) {
                        include('02_file.html') ;
                    }
                ?>
            </select>
        </div>
    </body>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</html>

01_file.html

<option value='' selected>Choose Sub Option</option>
<option value='subOption1'>Sub Option One</option>
<option value='subOption2'>Sub Option Two</option>
<option value='subOption3'>Sub Option Three</option>

02_file.html

<option value='' selected>Choose Sub Option</option>
<option value='diffOption1'>Different Option One</option>
<option value='diffOption2'>Different Option Two</option>
<option value='diffOption3'>Different Option Three</option>

所以基本上，关键是当您在第一个下拉列表中选择一个选项-selectornr01-在第二个div中应该出现一堆选项。

Answer 1

要让您了解使用javascript（jQuery）可以做什么：

将事件监听器添加到第一个下拉菜单，并根据所选值显示/隐藏第二个下拉菜单。

$('#selectornr01').on('change', function() {
  val = parseInt($(this).val());
  $('.sub').hide();
  if (val === 1) {
    $('#sub1').show();
  } else if (val === 2) {
    $('#sub2').show();
  }
});

//Or in plain JS

var selection = document.getElementById("selectornr01");
selection.addEventListener("change", function() {
  var val = parseInt(selection.value);
  [].forEach.call(document.getElementsByClassName('sub'), function(el) {
    el.style.display = 'none';
  });
  if (val === 1) {
    document.getElementById("sub1").style.display = "block";
  } else if (val === 2) {
    document.getElementById("sub2").style.display = "block";
  }
});

.sub {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class='form-item message-error' style='display: inline-block;' data-tooltip='Option'>
  <select size='1' id='selectornr01' class='form-text'>
    <option value='0' selected>Choose Option</option>
    <option value='1'>Option One</option>
    <option value='2'>Option Two</option>
  </select>
</div>
<div class='form-item message-error' style='display: inline-block;' data-tooltip='SubOption'>
  <select size='1' id='sub1' class='form-text sub'>
    <option value='' selected>Choose Sub Option</option>
    <option value='subOption1'>Sub Option One</option>
    <option value='subOption2'>Sub Option Two</option>
    <option value='subOption3'>Sub Option Three</option>
  </select>
  <select size='1' id='sub2' class='form-text sub'>
    <option value='' selected>Choose Sub Option</option>
    <option value='diffOption1'>Different Option One</option>
    <option value='diffOption2'>Different Option Two</option>
    <option value='diffOption3'>Different Option Three</option>
  </select>
</div>

如何使用一个Select> Option以HTML形式启用另一个Select> Option

1 个答案: