Question

如果所选的选项是正确的，我正在尝试显示一些HTML代码，是否可能？

示例：

<select name="ref_rubrique">
   <option value="1"> number 1 </option>
   <option value="2" selected> number 2 </option>
</select>

和

<?php if( $selected==true ): ?>
  <p>hello<p>
<?php else(): ?>
  <p><p>
<?php endif(); ?>

Answer 1

提交表单后，您可以查看$_REQUEST['ref_rubrique']。然后，您可以比较该值，例如1 == $_REQUEST['ref_rubrique']。 "1"和"2"都是真值。

Answer 2

为了在不刷新页面的情况下立即发生这种情况，它需要完全在客户端代码（JavaScript）中进行。那么，让我们从您的页面元素开始：

<select name="ref_rubrique">
    <option value="1"> number 1 </option>
    <option value="2" selected> number 2 </option>
</select>

您还需要某种占位符来输出。让我们使用id属性，这样我们就可以轻松唯一地识别相关元素。所以让我们用这个：

<select name="ref_rubrique" id="ref_rubrique">
    <option value="1"> number 1 </option>
    <option value="2" selected> number 2 </option>
</select>
<div id="ref_output"></div>

目前输出为空。当select元素的值发生变化时，它将由我们的JavaScript代码填充。所以现在我们需要一个script代码块来将该功能附加到该元素的change事件中：

<select name="ref_rubrique" id="ref_rubrique">
    <option value="1"> number 1 </option>
    <option value="2" selected> number 2 </option>
</select>
<div id="ref_output"></div>
<script type="text/javascript">

    var selectElement = document.getElementById('ref_rubrique');
    var divElement = document.getElementById('ref_output');

    selectElement.onchange = function () {
        var selectedValue = selectElement.options[selectElement.selectedIndex].value;
        if (selectedValue == '1') {
            divElement.innerHTML = '<p>hello</p>';
        } else if (selectedValue == '2') {
            divElement.innerHTML = '<p></p>';
        }
    };

</script>

所以我在这里做的是：

获取对每个HTML元素的引用作为JavaScript变量
将函数绑定到change元素的select事件，这将...
获取select元素
如果选择的值是，则将HTML写入输出div元素
如果是其他内容，请将其他HTML写入div元素

您可以看到此here的实时示例。

Answer 3

如果有人在寻找我的解决方案，我就这样做了：

<select name="ref_rubrique" id="ref_rubrique">
   <option value="11">11</option>
   <option value="12" selected>12</option>
   <option value="13">13</option>
</select>
<div id="ref_output">
   <?php 
   if (isset($_GET["id_rubrique"])){
      if($_GET["id_rubrique"]==12){
   ?>
         <p>Your question here !</p>
         <p><input name="type" type="radio" value="1" <? if($page_type=='true'){ ?>checked<? } ?>>Oui<input name="type" type="radio" value="0" <? if($page_type=='false'){ ?>checked<? } ?>>Non</p>
   <?php
      }
   }
   ?>
</div>
<script language="javascript" type="text/javascript">
   var selectElement = document.getElementById('ref_rubrique');
   var divElement = document.getElementById('ref_output');
   selectElement.onchange = function () {
   var selectedValue = selectElement.options[selectElement.selectedIndex].value;
   if (selectedValue == '12') {
        divElement.style.display = "block";
   } else if (selectedValue != '12') {
        divElement.style.display = "none";
   }
};
</script>

感谢大家的帮助，再见：）

Answer 4

你可能应该比 name

更好地使用 id

<select id="ref_rubrique">
    <option value="1"> number 1 </option>
    <option value="2" selected> number 2 </option>
</select>
<div id="textPlace"></div>

您可以使用JQuery检查已选择的值，然后获取p或div元素并将文本添加到其中。

//check if the selected option has a value of 2, than set the text
if($('#ref_rubrique').val() == 2){
    $("#textPlace").html("My text");
}

以下是一个实例：Here

选择<select>标签显示HTML </select>

4 个答案: