喵喵笨兔の喵喵的家~遊戲天地

喵喵笨兔の喵喵的家~遊戲天地 - PHP 網頁下拉選單 <select>，選完表單 <form> 自動送出，且保留選中值而不返回預設值

PHP 網頁下拉選單 <select>，選完表單 <form> 自動送出，且保留選中值而不返回預設值

　在 PHP 網頁的表單 <form> 使用下拉選單 <select>，在使用者選擇完畢之後，需要再按一下『送出』的按鈕。若不想多按一下，而要讓它選定後就送出，且保留所選值而不返回預設值。以下語法即可達到此效果！

`javascript 寫法1：`

<!doctype html>
<html>
<body>

<form id="form1" action="" method="GET">
  <select id="test" name="test" onchange="submit();">
    <option value="">請選擇</option> 
    <option value="A">A</option> 
    <option value="B">B</option> 
    <option value="C">C</option> 
  </select> 
</form>

<script>
	document.getElementById('test').value='<?=$_GET['test'] ?>'; //保留下拉所選
</script>

</body>
</html>

`javascript 寫法2：`

<!doctype html>
<html>
<body>

<form id="form2" action="" method="GET">
  <select id="test1" name="test1" onchange="submit();">
    <option value="">請選擇</option> 
    <option value="A" <?php if($_GET['test1']=='A'){ echo 'selected';} ?>>A</option> 
    <option value="B" <?php if($_GET['test1']=='B'){ echo 'selected';} ?>>B</option> 
    <option value="C" <?php if($_GET['test1']=='C'){ echo 'selected';} ?>>C</option> 
  </select> 
</form>
</body>
</html>

`jquery 寫法1：`

筆者只是把表單送出改成 jquery 語法來做個比較而已，其它與 javascript 寫法一樣。

<!doctype html>
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>

<script>
  $(function(){
        $('#selecttest').change(function(){
				$('#frmtest').submit();
			});
		});
</script>
</head>

<body>
<form id="frmtest" action="" method="GET">
  <select id="selecttest" name="test">
    <option value="">請選擇</option> 
    <option value="A">A</option> 
    <option value="B">B</option> 
    <option value="C">C</option> 
  </select> 
</form>

<script>
	document.getElementById('selecttest').value='<?=$_GET['selecttest'] ?>'; //保留下拉所選
</script>

</body>
</html>

`jquery 寫法2：`

設此網頁檔名為 test.php

<!doctype html>
<html>
<head>

<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>

<script>
$(function(){
  $('#test').on('change',function(){
     document.getElementById('frmtest').action = "test.php"; //此行可省略
     document.frmtest.submit();
	});
});
</script>

</head>
<body>
<form id="frmtest" name="frmtest" action="" method="GET">
  <select id="test" name="test">
    <option value="">請選擇</option> 
    <option value="A" <?php if(($_GET['test'])=='A'){ echo selected; } ?>>A</option> 
    <option value="B" <?php if(($_GET['test'])=='B'){ echo selected; } ?>>B</option> 
    <option value="C" <?php if(($_GET['test'])=='C'){ echo selected; } ?>>C</option> 
  </select> 
</form>
</body>
</html>

笨兔隨手筆記於 2017/12/22

喵喵笨兔の喵喵的家~遊戲天地
http://vv0817.tk
http://vvv.lionfree.net
http://qo3op.asuscomm.com/vvv
https://uoedgpkhyfwzmd7zua8myg-on.drv.tw/vvv