[英]Change select menu options on the fly
My signup for looks like that: 我的注册看起来像那样:
<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>
What I wanna do is, if selected a, "group" select menu options will be, in range [1;4], if selected b then [5;9]. 我想要做的是,如果选择a,“组”选择菜单选项将在范围[1; 4]中,如果选择b然后[5; 9]。 How to change php on the fly?
如何动态更改php? is it possible with js?
用js可以吗?
First of all the radio buttons should be give a common name so that they will work a radio buttons. 首先,单选按钮应该是一个通用名称,以便它们可以使用单选按钮。
Markup change 标记更改
<input type="radio" name="selectGroup" value="a">a
<input type="radio" name="selectGroup" value="b">b
JS 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");
}
});
});
php is a server scripting language, if process with in the server and send the output the client machine. php是一种服务器脚本语言,如果在服务器中处理并将输出发送到客户机。 according to your requirement you need to use ajax.
根据您的要求,您需要使用ajax。 for that you can use raw javascript of javascript libraries like jquery, mootools etc. if you don't know jquery or mootools dont worry.
为此,你可以使用javascript,mootools等javascript库的原始javascript,如果你不知道jquery或mootools不要担心。 here is a video tutorial for jquery.
这是jquery的视频教程。 learn this and enjoy!!!
学习这个并享受!
Jquery video tutorial for absolute beginners 绝对初学者的Jquery视频教程
Change the radio
buttons html to this: 将
radio
按钮html更改为:
<input type="radio" value="a" name="selectedValue" onclick="selectedValue('a');">a
<input type="radio" value="b" name="selectedValue" onclick="selectedValue('b');">b
Make two select
s, not more than one will be shown in any given moment 制作两个
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>
using jQuery, add the following logic to the document ready event: 使用jQuery,将以下逻辑添加到文档就绪事件:
$(function() {
$('[name=selectedValue]').each(function() {
if (this.checked) {
selectedValue(this.value);
}
}
});
it will display the correct select
after loading the page. 加载页面后,它将显示正确的
select
。
Define the selectedValue
function as follows: 定义
selectedValue
函数,如下所示:
function selectedValue(value) {
$('select[name=group][for=' + value + ']')
.show()
.removeAttr('disabled');
$('select[name=group][for!=' + value + ']')
.hide()
.attr('disabled', 'disabled');
}
It chooses the select
to display. 它选择要显示的
select
。
Use the below code 使用以下代码
<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>
Hope this helps you. 希望这对你有所帮助。
you need no php to do this....that`s why we have javascript, to manipulate DOM elements: First, you need to have the same 'name' attribute for all the radio buttons: 你不需要php来做这个....这就是为什么我们有javascript来操纵DOM元素:首先,你需要为所有的单选按钮都有相同的'name'属性:
<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;
}
});
Ok, if you must use PHP for your project, then I would use two select menus. 好吧,如果你必须使用PHP作为你的项目,那么我会使用两个选择菜单。 You can use jQuery to edit your current select menu..but you probably need to use PHP to get the select menus values... So this way you can preload the select menus easily in PHP and use jQuery to hide the inactive select menu, based on the radio buttons.
您可以使用jQuery编辑当前的选择菜单..但您可能需要使用PHP来获取选择菜单值...这样您就可以在PHP中轻松预加载选择菜单并使用jQuery隐藏非活动选择菜单,基于单选按钮。
Live example of the jQuery action jQuery动作的实例
Live example of jQuery with PHP 用PHP实现jQuery的实例
Notes: 笔记:
name=""
parameters, technically in a form, they are not valid and wont work. name=""
参数,从技术上讲,它们无效并且不起作用。 checked
from the first radiobutton and then none of the select menus will be displayed on the first load. checked
,然后在第一次加载时不会显示任何选择菜单。 value="'.$i.'"
in your option, if in the option you already have the value. value="'.$i.'"
。 Meaning that if no value=""
is being set, then the options main value will be used as default. value=""
,则选项main值将用作默认值。 However, if you have for example some names, but you wish only ID's, then: <option value="3">Kalle H. Väravas</option>
and the value parameter will be used, instead of the options value. <option value="3">Kalle H. Väravas</option>
和value参数将被使用,而不是选项值。 Full working code: 完整的工作代码:
<!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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.