【问题标题】:How to pop up radio button for user input according to dropdown list option?如何根据下拉列表选项弹出用户输入的单选按钮?
【发布时间】:2014-08-28 17:30:37
【问题描述】:

我有一个包含插件项目值的下拉列表。当 $a="Driver";选择或提交,然后应该会出现一个单选按钮,要求用户选择其中一个。一个用于第 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 表单

取货日期归还日期附加物品数量 月

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

【问题讨论】:

  • 如果您发布了表单的 HTML 示例以及一些示例数据,那就太好了。而且您的 JS 函数对您的要求没有任何意义。
  • 关于你的最后一个问题:stackoverflow.com/questions/2338942/…
  • @CrazySabbath,我添加了我的 html 表单。我知道 JS 并不能很好地理解我真正想要的东西。我刚刚尝试了一些可以允许用户键入输入的方法。我只需要在下拉列表中显示 value="Driver" 的弹出框。即允许用户选择第 8 小时或第 16 小时费率跨度>

标签: javascript php


【解决方案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>

【讨论】:

  • subramaniam,感谢您的评论。我会尽力让你知道。
  • subramaniam v,我们能保持联系吗,我很高兴遇到一位印度女程序员!
  • @CrazySabbath 我试过你的方法,它只是不会触发任何东西。我发布了我编辑的代码..请看一下。
  • 评论是给我的吗?
  • 你不能这样做:
【解决方案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();
    }

});

【讨论】:

    猜你喜欢
    • 2012-09-11
    • 2015-05-10
    • 1970-01-01
    • 2016-07-12
    • 2019-10-26
    • 2010-12-25
    • 1970-01-01
    • 2017-03-25
    • 2015-11-26
    相关资源
    最近更新 更多