html中select标签的值提交后,不显示默认值,而是显示提交后的值

简介

我们要实现的功能就是当我们把select标签中的值当做表单提交后,我们希望后台处理结果在当前页面显示,但select标签不显示默认值,而是显示提交后的值,最终形成一种更好的页面观感,如果还没听懂得话,看下面两张图片:
初始页面:
在这里插入图片描述
默认值为香蕉
提交后页面:
在这里插入图片描述
选中了苹果,然后提交,结果在当前页面处理,保持选中值不被刷新,也就是苹果,并在当前页面输出提交表单的值
下面代码仅用简单的html+php实现

代码部分

部分功能已注释

<html>
<head>
	<meta charset="utf-8">
</head>
<body>
	<?php
		$value="香蕉"; //设置初始值为香蕉
		if($_REQUEST) //检测当前页面是否有表单提交,有则更新默认值
		{
			$value=$_REQUEST["fruit"];//获取当前页面提交的值,后面用于把该值设为select标签的默认值
		}
	?>
	<form method="POST" action="test_1.php">
		你最喜欢吃的水果是:
		<select name="fruit">
			<option value="榴莲"<?php echo $value=="榴莲"?"selected='榴莲'":""?>>榴莲</option>
			<option value="苹果"<?php echo $value=="苹果"?"selected='苹果'":""?>>苹果</option>
			<option value="香蕉"<?php echo $value=="香蕉"?"selected='香蕉'":""?>>香蕉</option>
		</select>
		<input type="submit" value="提交"/>
	</form>
	<?php
		if($_REQUEST)
		{
			$fruit=$_REQUEST["fruit"]; //接收表单的值
			echo "我最喜欢的水果是:$fruit<br />"; //对其值进行输出
		}
	?>
</body>
</html>

代码解释

对小伙伴们可能不理解的代码进行解释,从代码开始到结束

  • <form method=“POST” action=“test_1.php”>:表单以POST的形式进行提交,当前页面名为test_1.php,所以数据传到当前页面进行处理
  • <option $value=“榴莲”<?php echo value==“榴莲”?“selected=‘榴莲’”:""?>>榴莲</option>:"?“和”:“是一个三目运算符,效果同if else语句,只是更加简短,判断$value的值是否为"榴莲”,是则输出"selected=‘榴莲’“的语句,把默认值改为"榴莲”,不是则输出空值,selected属性用来控制select标签的默认值

结语

小伙伴们可以把代码直接复制一遍,看能否实现功能,能的话,希望小伙伴们能按照思路,敲一遍,增强记忆,有问题或想法欢迎讨论。

原创文章 6 获赞 7 访问量 546

猜你喜欢

转载自blog.csdn.net/jiuzhongxian_/article/details/106125881
今日推荐