PHP - 如果下拉选择 = 某事

Question

如何根据下拉列表选择创建条件语句？

假设我们有一个包含条目的下拉列表：

Alpha
Bravo
Charlie
Other

我想创建一个条件语句，如果Other 是当前从下拉列表中选择的条目，我想回显一个声明If Other, Please Specify 的换行符。但如果它不是当前选择的条目，我不希望填充该字符串。

Answer 1

在 PHP 中

<select id="conditions" name="conditions">
    <option></option>
<?php
foreach($option in $optionList){
    echo "<option value=$option ";
    if($_REQUEST["conditions"] == $option){
        echo  'selected="selected"';
    }
    echo " > $option </option>";
}
echo "</select>";

if($_REQUEST["conditions"] == "Other"){
    echo '<div id="specify" style="display:block">If Other, Please Specify</div>';
}else{
    echo '<div id="specify" style="display:hidden">If Other, Please Specify</div>';
}
?>

在客户端的jQuery中

<script>
    $('#conditions').change(function(){
        if($(this).val() == "Other"){
            $('#specify').show();
        }else{
            $('#specify').hide();
        }
    });
</script>

Answer 2

正如 cmets 所说，您需要在 javascript 中执行此操作。以下功能应该做到这一点。

将此 javascript 包含在页面的 <script> 元素中，或包含在您的 javascript 文件中：

function checkSelect(selId, text, outputDiv) {
  var sel = document.getElementById(selId);
  var d = sel.options[sel.selectedIndex].text;
  if (d == text) {
    document.getElementById(outputDiv).innerHTML = "If Other, Please Specify";
  } else { 
    document.getElementById(outputDiv).innerHTML = "";
  }
}

然后调整您的 HTML 以在下拉列表更改时运行此功能：

<select id='Sel1' onchange='check("Sel1", "Other", "DivReqDetails");'>
  <option value='Alpha'>Alpha</option>
  <option value='Bravo'>Bravo</option>
  <option value='Charlie'>Charlie</option>
  <option value='Other'>Other</option>
</select>
<div id='DivReqDetails'></div>

---

编辑：如果您可以访问 jQuery，您可以通过调整 div 的内容来使 checkSelect() 更强大（因为您可以轻松调整 CSS，例如 display:hidden; 与 display:block; 之类的以及颜色。这是一个例子，如果你碰巧有 jQuery 支持的话。

我还添加了一些改进，让您可以将所需的文本发送到此函数（以便您可以让它检查多个字段并相应地显示不同的文本）：

function checkSelect(selId, text, outputDiv, outputText) {
  if ($("#"+selId).text() == text) {
    $("#"+outputDiv).html(outputText).css("display","block").css("color","red");
  } else { 
    $("#"+outputDiv).html("").css("display","none").css("color","black");
  }
}

或者，如果您要在表单的不同部分显示多个此类警告，您可以根据 CSS 类而不是单个项目来更改内容。请注意，这将更改所有警告 div，因此如果您正在寻找每个字段的反馈，这不是要走的路...

function checkSelect(selId, text, outputCssClass, outputText) {
  if ($("#"+selId).text() == text) {
    $("."+outputCssClass).html(outputText).css("display","block").css("color","red");
  } else { 
    $("."+outputCssClass).html("").css("display","none").css("color","black");
  }
}

显然，您可以在那里调整在任一条件下所做的更改。如果您从来没有任何理由调整显示的文本，那么您应该完全删除 .html() 部分。同样，如果您只在颜色为红色时显示此 div，请放弃该调整并将样式硬编码为您想要的样式。您可以通过对 .css() 的类似调用来更改有关相关元素的任何其他 css 属性