即时更改选择菜单选项答案

【问题标题】：Change select menu options on the fly即时更改选择菜单选项
【发布时间】：2011-11-05 23:14:28
【问题描述】：

我的注册看起来像这样：

<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可以吗？

【问题讨论】：

您需要在 ajax 调用上构建选项
澄清一下：在 PHP 中，您不能真正使用“即时”一词。既然如此。 PHP 以这种方式不是动态的，您必须为此使用 javascript。你可以用 PHP 做到这一点，但它不会是动态的，需要重新加载页面。
@Haim Evgi 怎么样？你能编辑一下代码吗？
@Kalle H. Väravas 感谢回复
用户 SELECTED 请检查此 URL htmlcodetutorial.com/forms/_OPTION_SELECTED.html，我们也可以使用 w3schools.com/html5/tag_optgroup.asp

标签： php javascript jquery select

【解决方案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");
      }
   });


});

【讨论】：

如何实现呢？在哪里可以找到这个 js？
start + 4 不起作用：它是 [1; 4] 在第一种情况下，即start + 3.
感谢您的回复。这是最好的方法，但 $select.empty();将我的默认值清空到。我该如何解决？

【解决方案2】：

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

Jquery video tutorial for absolute beginners

【讨论】：

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

制作两个selects，在任何给定时刻都不会显示超过一个

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

【讨论】：

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

希望对你有所帮助。

【讨论】：

第二种情况的范围需要是5-9，而不是1-9
尝试类似的方法来使用另一个变量。这只是示例，您必须根据自己的要求对其进行调整。
function assignVal(flg) { ... 在开始文件准备好的功能？
把它放在页眉部分
我不明白 echo val; ?> 为什么你在 js 中使用了 2 次？

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

【讨论】：

【解决方案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 参数，而不是 options 值。

完整的工作代码：

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

【讨论】：