Question

我的注册看起来像那样：

<input type="radio" value="a">a
<input type="radio" value="b">b


<select name="group">
<?php
for ($i=1; $i<=4; $i++)
{
    echo '<option value="'.$i.'">'.$i.'</option>';
    }
?>
</select>

我想要做的是，如果选择a，“组”选择菜单选项将在范围[1; 4]中，如果选择b则为[5; 9]。如何动态更改php？用js可以吗？

Answer 1

首先，单选按钮应该是一个通用名称，以便它们可以使用单选按钮。

标记更改

<input type="radio" name="selectGroup" value="a">a
<input type="radio" name="selectGroup" value="b">b

<强> JS

$(function(){

   $("input[name=selectGroup]").change(function(){
      var $select = $("select[name=group");
      var start = $("input[name=selectGroup]:checked").val() == "a"?1:4;
      var end = start + 4;
      $select.empty();
      for(;start < end;start++){
        $select.append("<option value='"+start+"'>"+start+"</option");
      }
   });


});

Answer 2

php是一种服务器脚本语言，如果在服务器中处理并将输出发送到客户机。根据您的要求，您需要使用ajax。为此，你可以使用javascript，mootools等javascript库的原始javascript，如果你不知道jquery或mootools不要担心。这是jquery的视频教程。学习这个并享受!!!

Jquery video tutorial for absolute beginners

Answer 3

将radio按钮html更改为：

<input type="radio" value="a" name="selectedValue" onclick="selectedValue('a');">a
<input type="radio" value="b" name="selectedValue" onclick="selectedValue('b');">b

制作两个select s，在任何特定时刻都会显示不超过一个

<select name="group" for="a" style="display: none" disabled="disabled" >
<?php
for ($i=1; $i<=4; $i++)
{
    echo '<option value="'.$i.'">'.$i.'</option>';
    }
?>
</select>
<select name="group" for="b" style="display: none" disabled="disabled" >
<?php
for ($i=5; $i<=9; $i++)
{
    echo '<option value="'.$i.'">'.$i.'</option>';
    }
?>
</select>

使用jQuery，将以下逻辑添加到文档就绪事件：

$(function() {
    $('[name=selectedValue]').each(function() {
        if (this.checked) {
            selectedValue(this.value);
        }
    }
});

加载页面后，它会显示正确的select。

定义selectedValue函数，如下所示：

function selectedValue(value) {
    $('select[name=group][for=' + value + ']')
        .show()
        .removeAttr('disabled');
    $('select[name=group][for!=' + value + ']')
        .hide()
        .attr('disabled', 'disabled');
}

选择显示select。

Answer 4

使用以下代码

<input type="radio" value="a" onclick="assignVal(1)">a
<input type="radio" value="b" onclick="assignVal(2)">b
function assignVal(flg)
{

  if(flg==1)
  {
   var val = 4;
  <?php $range = echo '<script type="text/javascript"> echo val; </script> ?>
  }
  else
  {
  var val = 9;
  <?php $range = echo '<script type="text/javascript"> echo val; </script> ?>
  }
}

<select name="group">
<?php
for ($i=1; $i<=$range; $i++)
{
    echo '<option value="'.$i.'">'.$i.'</option>';
    }
?>
</select>

希望这会对你有所帮助。

Answer 5

你不需要php来做这个....这就是为什么我们有javascript，来操纵DOM元素：首先，您需要为所有单选按钮设置相同的“名称”属性：

<input type="radio" name="choose_a_name" value="a">a
<input type="radio" name="choose_a_name" value="b">b
<select name="group">

var SetOptions = function(selectElem, from, to)
{    
    for(var i = from; i<=to;i++)
    {
        $('<option>').html(i).val(i).appendTo(selectElem);
    }
}; 
$('input[type=radio]').change(function()
{    
    switch(this.value)
    {
        case 'a':
            SetOptions ($('select').empty(),1,4);
            break;                    
         case 'b':
            SetOptions ($('select').empty(),5,9);
            break;
    }           
});

Answer 6

好的，如果你必须在项目中使用PHP，那么我会使用两个选择菜单。您可以使用jQuery编辑当前的选择菜单..但您可能需要使用PHP来获取选择菜单值...这样您就可以在PHP中轻松预加载选择菜单并使用jQuery隐藏非活动选择菜单，基于单选按钮。

<强> Live example of the jQuery action

<强> Live example of jQuery with PHP

备注：

您的单选按钮没有name=""参数，从技术上讲，它们无效且无法正常工作。

我添加了文档ready（）部分，因此您可以选择在加载时不显示任何选择菜单。只需从第一个单选按钮中删除checked，然后不会显示任何选择菜单在第一次装载时。

如果选项中已包含值，则无需在选项中使用value="'.$i.'"。这意味着如果未设置value=""，则选项主值将用作默认值。但是，如果您有一些名称，但只希望使用ID，那么：<option value="3">Kalle H. Väravas</option>将使用value参数，而不是选项值。

完整的工作代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Change select menu options on the fly - Kalle H. Väravas</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style> html, body {margin: 0px; padding: 20px;} .hidden_select {display: none;} </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script> </head> <body> <input type="radio" name="group" value="a" checked /> A <input type="radio" name="group" value="b" /> B<br /> <br /> <?php // Group A select menu echo '<select name="group_a" class="hidden_select">'; for ($i = 1; $i <= 4; $i++) { echo '<option>' . $i . '</option>'; } echo '</select>'; // Group B select menu echo '<select name="group_b" class="hidden_select">'; for ($i = 5; $i <= 9; $i++) { echo '<option>' . $i . '</option>'; } echo '</select>'; ?> <script> // This decoument ready can be used as setting the default value. If you remove the "checked", from the first radiobutton..then both selects will be hidden and of course none of the radiobuttons will be checked $(document).ready(function() { // Lets get the default group by checking which radiobutton is checked var current_checked = $('input[name=group]:checked'); // If we have a default value on load, then: if (current_checked) { // We pick the select matching to our radiobuttons value and make it visible $('select[name=group_' + current_checked.val() + ']').show(); // PS: You can use .fadeIn() instead of show() } }); // Now lets catch the click action on any of the radiobuttons $('input[name=group]').click(function () { // Lets get the group ID (a or b), from radiobuttons value var this_group = $(this).val(); // First lets make both selects equal and hide them $('select.hidden_select').hide(); // Then display the currently active select $('select[name=group_' + this_group + ']').show(); }); </script> </body> </html>

动态更改选择菜单选项

6 个答案: