Question

我在下面用PHP编写了这段代码。

第二个<select>必须出现，如果第一个被选中，请选择Fotografia或Filmagem 。

为什么不起作用？

<select size="1" name="area">
    <option selected value="pergunta">Área de atuação</option>
    <option value="design">Design</option>
    <option value="software">Desenvolvimento de Software</option>
    <option value="web">Desenvolvimento WEB</option>
    <option value="videos">Edição e montagem de vídeos</option>
    <option value="filmagem">Filmagem</option>
    <option value="fotografia">Fotografia</option>
    <option value="informatica">Informática</option>
</select><br/><br/>

<?PHP
if(area == fotografia OR area == filmagem){
echo '
    <select size="1" name="equipamento" >
        <option selected value="pergunta">Possui equipamento?</option>
        <option value="sim">Sim</option>
        <option value="nao">Não</option>
    </select><br><br> ';
 } ?>

Answer 1

赞@donald123说： PHP是SERVER-SIDE ... SELECT（更改）是客户端..

因此，您需要更正代码并使用 Javascript 。除非您在为同一页面发送POST时需要验证（隐藏或显示）... like @Arian answer：

使用我的回答，你需要使用jQuery（一个Javascript Lib）。如果您想要纯粹的JavaScript方式，请尝试see the @Yani answer below。

<!-- In you header -->
<script type="text/javascript" src="jquery.min.js"></script>
<!-- / In your header -->

<select size="1" name="area" id="area-select">
  <option selected value="pergunta">Área de atuação</option>
  <option value="design">Design</option>
  <option value="software">Desenvolvimento de Software</option>
  <option value="web">Desenvolvimento WEB</option>
  <option value="videos">Edição e montagem de vídeos</option>
  <option value="filmagem">Filmagem</option>
  <option value="fotografia">Fotografia</option>
  <option value="informatica">Informática</option>
</select><br/><br/>

<select size="1" name="equipamento" id="equipamento" style="display: none;">
  <option selected value="pergunta">Possui equipamento?</option>
  <option value="sim">Sim</option>
  <option value="nao">Não</option>
</select>

<script type='text/javascript'>
  $(document).ready(function() {

    $('#area-select').change(function() {
      if ($(this).val() == 'fotografia' OR $(this).val() == 'filmagem') {
       $('#equipamento-select').show();
      } else {
        $('#equipamento-select').hide();
      }
    });

  });
</script>

Answer 2

它不起作用，因为你在HTML / Javascript DOM元素和PHP变量之间混淆。

在PHP中无法访问DOM选择元素“区域”，因为PHP发生在服务器端（在元素可访问之前）。

您需要使用客户端方法（如Javascript和CSS）来动态控制元素。

 <select size="1" name="area" id="area" onChange="onSelectChange()">
        <option selected value="pergunta">Área de atuação</option>
        <option value="design">Design</option>
        <option value="software">Desenvolvimento de Software</option>
        <option value="web">Desenvolvimento WEB</option>
        <option value="videos">Edição e montagem de vídeos</option>
        <option value="filmagem">Filmagem</option>
        <option value="fotografia">Fotografia</option>
        <option value="informatica">Informática</option>
    </select><br><br>

  <select size="1" name="equipamento" id="equipamento" style="display:none;">
        <option selected value="pergunta">Possui equipamento?</option>
        <option value="sim">Sim</option>
        <option value="nao">Não</option>
    </select><br><br>

<script>

function onSelectChange() {
    var value = document.getElementById("area").value;
    if ( (value == 'fotografia') || (value == 'filmagem')) {
        document.getElementById('equipamento').style.display = 'block';
    } else {
        document.getElementById('equipamento').style.display = 'none';
    }
}
</script>

此示例使用纯Javascript。如果您使用的是jQuery（Javascript库），请参阅下面的@ Partick的答案。我没有包含一个jQuery示例，因为我不想仅为这个简单的任务创建对jQuery的不必要的依赖。如果您打算经常操作DOM元素，我建议使用jQuery。我个人在需要客户端脚本的每个项目中使用它。

希望这有帮助！

PHP - 如果在其他选择中选择了一个选项，则添加一个选择

2 个答案: