PHP - if dropdown selection =某事

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

正如评论所说，你需要在javascript中做到这一点。下面的函数可以做到这一点。

在页面的<script>元素中或在您的javascript文件中包含此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，你可以通过做更多的事情来使checkSelect()更强大，而不仅仅是调整div的内容(因为你可以很容易地调整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属性