如何根据下拉列表选项弹出用户输入的单选按钮？

Question

我有一个下拉列表，包含插件项值。当$ a =“司机”时;选中或提交后，应显示一个单选按钮，要求用户选择其中一个。一个用于第8个​​小时，另一个用于第16个小时。怎么办呢？

下拉列表如下：

<select name="addon">
                   <?php
                   mysql_select_db($database_bumi_conn, $bumi_conn);
                   $query="SELECT * FROM tbl_addons WHERE status=1";
                   $result=mysql_query($query)or die(mysql_error());
                   while($row=mysql_fetch_array($result))
                   {
                       $a_id=$row['addOns_id'];
                       $a=$row['addOns'];

                   ?>

                   <option value="<?php echo $a_id;?>"><?php echo $a;?></option>
                   <?php

                   }
                   ?>

                   </select>

我尝试过这样的事情，

 <script>
function myFunction() {
    var person = prompt("Please type either 8 or 16 for 8th hour and 16th hour respectively", "Driver");

    if (person != null) {


        document.getElementById("demo").innerHTML =
        "Hello " + person + "! How are you today?";


    }
}
</script>

弹出一个框，要求输入上述值。但是如何将值存储在php变量中？

我的HTML表格

                        拿起dateReturn dateAddon ItemsQuantity                                                                                                                                                                                         几个月
                                              

                    $mm=array_map(function($val)
                     {
                        return sprintf('%02d', $val);
                      }, range(1, 12));
                    foreach($mm as $i)
                    {
                        $this_day = date('m'); 
                        $selected = ''; 
                        if (strlen($i) == 1) { 
                        $i = '0'.$i; 
                        if ($i == $this_day) $selected = 'selected="selected"'; 
                        } else { 
                        if ($i == $this_day) $selected = 'selected="selected"'; 
                        } 

                        ?>
                        <option value="<?php echo $i;?>" <?php echo $selected;?>><?php echo $i;?></option>
                        <?php
                    }
                    ?>
                </select>
                        </td>
                        <td>
                        <span class="">date</span><br/>
                <select name="date" class="">
                <?php
                    $mm=array_map(function($val)
                     {
                        return sprintf('%02d', $val);
                      }, range(1, 31));
                      foreach($mm as $i)
                      {
                        $this_day = date('d'); 
                        $selected = ''; 
                        if (strlen($i) == 1) { 
                        $i = '0'.$i; 
                        if ($i == $this_day) $selected = 'selected="selected"'; 
                        } else { 
                        if ($i == $this_day) $selected = 'selected="selected"'; 
                        } 
                          ?>
                          <option value="<?php echo $i;?>" <?php echo $selected;?>><?php echo $i;?></option>
                          <?php
                      }
                ?>
                </select>
                        </td>
                        <td>
                        <span class="">year</span><br />
                 <select name="year" class="">
                <?php
                    foreach(range(2014,2050) as $year)
                    {
                        $this_day = date('Y'); 
                        $selected = ''; 
                        if (strlen($i) == 1) { 
                        $i = '0'.$i; 
                        if ($i == $this_day) $selected = 'selected="selected"'; 
                        } else { 
                        if ($i == $this_day) $selected = 'selected="selected"'; 
                        } 
                ?>
                    <option value="<?php echo $year; ?>" <?php echo $selected;?>><?php echo $year; ?></option>
                <?php
                    }
                ?>
                </select>
                        </td>
                        </tr>
                    </table>
                   </td>
                   <td>
                    <table>
                        <tr>
                        <td>
                        <span class="">months</span><br />
                 <select name="months_2" class="">
                    <?php



                    $mm=array_map(function($val)
                     {
                        return sprintf('%02d', $val);
                      }, range(1, 12));
                    foreach($mm as $i)
                    {
                        $this_day = date('m'); 
                        $selected = ''; 
                        if (strlen($i) == 1) { 
                        $i = '0'.$i; 
                        if ($i == $this_day) $selected = 'selected="selected"'; 
                        } else { 
                        if ($i == $this_day) $selected = 'selected="selected"'; 
                        } 

                        ?>
                        <option value="<?php echo $i;?>" <?php echo $selected;?>><?php echo $i;?></option>
                        <?php
                    }
                    ?>
                </select>
                        </td>
                        <td>
                        <span class="">date</span><br/>
                <select name="date_2" class="">
                <?php
                    $mm=array_map(function($val)
                     {
                        return sprintf('%02d', $val);
                      }, range(1, 31));
                      foreach($mm as $i)
                      {
                        $this_day = date('d'); 
                        $selected = ''; 
                        if (strlen($i) == 1) { 
                        $i = '0'.$i; 
                        if ($i == $this_day) $selected = 'selected="selected"'; 
                        } else { 
                        if ($i == $this_day) $selected = 'selected="selected"'; 
                        } 
                          ?>
                          <option value="<?php echo $i;?>" <?php echo $selected;?>><?php echo $i;?></option>
                          <?php
                      }
                ?>
                </select>
                        </td>
                        <td>
                        <span class="">year</span><br />
                 <select name="year_2" class="">
                <?php
                    foreach(range(2014,2050) as $year)
                    {
                        $this_day = date('Y'); 
                        $selected = ''; 
                        if (strlen($i) == 1) { 
                        $i = '0'.$i; 
                        if ($i == $this_day) $selected = 'selected="selected"'; 
                        } else { 
                        if ($i == $this_day) $selected = 'selected="selected"'; 
                        } 
                ?>
                    <option value="<?php echo $year; ?>" <?php echo $selected;?>><?php echo $year; ?></option>
                <?php
                    }
                ?>
                </select>
                        </td>
                        </tr>
                    </table>
                   </td>
                   <td>
                   <select name="addon">
                   <?php
                   mysql_select_db($database_bumi_conn, $bumi_conn);
                   $query="SELECT * FROM tbl_addons WHERE status=1";
                   $result=mysql_query($query)or die(mysql_error());
                   while($row=mysql_fetch_array($result))
                   {
                       $a_id=$row['addOns_id'];
                       $a=$row['addOns'];

                   ?>

                   <option value="<?php echo $a_id;?>"><?php echo $a;?></option>
                   <?php

                   }
                   ?>

                   </select>

                   </td>
                   <td>
                   <input type="text" name="qty" />
                   </td>
                   <td>
                   <input type="hidden" name="mm_insert" value="insert_log" />

                    <input type="submit" name="add" value="Add"/>


                   </form>
                   </td>
                  </tr>
                </table>

编辑：

<script>
       $('#radioButtons').hide(); 
       $('#addon').bind('click',function()
       {
           var optionSelected=$('option:selected',this);
           var valueSelected=this.value;
           if($valueSelected=='6')
               {
                   $('#radioButtons').show();
                   $("input[type='radio'][name='driver']").click(function()
                   {
                       var selected=$('input[type="radio"][name="driver"]:checked').val();
                       alert(selected);
                   });
               }else
                   {
                       $('#radioButtons').hide();
                   }
       });
   </script>

根据@punitha建议编辑：

<td>
                           <br/>
                       <select name="addon" id='addon' id="addon" onchange="triggerAddon(this.value)">

                       <?php
                       mysql_select_db($database_bumi_conn, $bumi_conn);
                       $query="SELECT * FROM tbl_addons WHERE status=1";
                       $result=mysql_query($query)or die(mysql_error());
                       while($row=mysql_fetch_array($result))
                       {
                           $a_id=$row['addOns_id'];
                           $a=$row['addOns'];

                       ?>

                       <option value="<?php echo $a_id;?>"><?php echo $a;?></option>
                       <?php

                       }
                       ?>

                       </select>

                       </td>
                       <td>

                         <br/>
                          <div id="ageConfirmation">
                           <input type="radio" id='ageeig'name="driver" value="8">8th Hour
                           <input type="radio" id='agesix' name="driver" value="16">16th Hour

                          </div>
                       </td>
//script

<script>

function triggerAddon(AddonValue){ if($.trim(AddonValue)=="Driver"){$('#ageConfirmation').show(); } }



function validateForm(){
if($.trim($('#addon').val())=="Driver"){
 if(!$('#ageeig').is(':checked') || !$('#agesix').is(':checked')) { alert("Please select either one"); }
}
}
        </script>

Answer 1

something like this:
<select name="addon" id="addon" onchange="triggerAddon(this.value)">

In script:
function triggerAddon(AddonValue){ if($.trim(AddonValue)=="Driver"){$('#ageConfirmation').show(); } }

In html:
<div id="ageConfirmation">8<input type="radio" id="ageeig" name="age" value="8" /><input type="radio" name="age" value="16" id="agesix" /></div

while submit the form:
function validateForm(){
if($.trim($('#addon').val())=="Driver"){
 if(!$('#ageeig').is(':checked') || !$('#agesix').is(':checked')) { alert("Please select either one"); }
}
}

被修改

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<select name="addon" id='addon' id="addon" onchange="triggerAddon(this.value)">
    <option value=""></option>
    <option value="Driver">Driver</option>
    <option value="Security">HR</option>
    <option value="HR">HR</option>
    <option value="Assistant">Passenger</option>
</select>
    <br/>
    <div id="ageConfirmation" style="display:none;">
        <input type="radio" id='ageeig'name="driver" value="8">8th Hour
        <input type="radio" id='agesix' name="driver" value="16">16th Hour
    </div>

    <input type="button" onclick="validateForm()" value="Submit" />

<script>
function triggerAddon(AddonValue){
 if($.trim(AddonValue)=="Driver"){
    $('#ageConfirmation').show(); 
 } else {
    $('#ageConfirmation').hide(); 
 }
}

function validateForm(){
    if($.trim($('#addon').val())=="Driver"){
     if(!$('#ageeig').is(':checked') || !$('#agesix').is(':checked')) {
        alert("Please select either one"); 
        $('#ageeig').focus();
     }
    }
}
</script>

Answer 2

选中此项（不是弹出单选按钮，但您应该明白这一点）：

fiddle example

<select id="addon" name="addon">
    <option id="123" value="123">Driver</option>
    <option id="423" value="423">Option2</option>
    <option id="523" value="523">Option3</option>
</select>

<form action="" id="radioButtons">
    <input type="radio" name="hours_rate" value="8">8th hour rate
    <input type="radio" name="hours_rate" value="16">16th hour rate
</form>

$('#radioButtons').hide();
$('#addon').bind('click', function(){
    var optionSelected = $("option:selected", this);
    var valueSelected = this.value;
    if(valueSelected == '123'){

      $('#radioButtons').show();
        $("input[type='radio'][name='hours_rate']").click(function(){
      var selected = $("input[type='radio'][name='hours_rate']:checked").val();
          alert(selected);
        });

    }else{
       $('#radioButtons').hide();
    }

});