make the <select> tag selected display HTML

问题

I'm trying to make appear some HTML code if the selected option is the right one, is it possible?

example:

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

and

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

回答1:

When the form is submitted you can check $_REQUEST['ref_rubrique']. You can then compare the value, e.g. 1 == $_REQUEST['ref_rubrique']. Both "1" and "2" are truthy values.

回答2:

In order for this to happen immediately without refreshing the page, it needs to happen entirely in client-side code (JavaScript). So, let's start with your page elements:

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

You'll also need some sort of placeholder for the output. And let's use id attributes so we can easily uniquely identify the elements in question. So let's use this:

<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>

For now the output is empty. It will be populated by our JavaScript code when the select element's value changes. So now we need a script code block to attach that functionality to the change event of that element:

<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>

So what I've done here is:

• Get a reference to each of the HTML elements as JavaScript variables
• Bind a function to the change event for the select element, which will...
• Get a the selected value of the select element
• If that selected value is something, write HTML to the output div element
• If it's something else, write other HTML to the div element

You can see a live example of this here.

回答3:

I did it that way if anyone is looking for my solution:

<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>

Thanks to everyone for the help, bye :)

回答4:

You probably should use id better than name

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

You can use JQuery to check for the value that has been selected, then get the p or div element and add your text to it.

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

Here is a live example: Here

来源：https://stackoverflow.com/questions/19182748/make-the-select-tag-selected-display-html