引导下拉列表选择确认方式按钮

从下拉列表中选择项目后，用户将通过单击按钮确认选择。然后必须将其移动到分配给此项目的页面怎么做？从下拉列表中选择项目后，用户将通过单击按钮确认选择。然后必须将其移动到分配给该项目的页面怎么做？

谢谢:)

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap-select Tests (Bootstrap 4)</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css">
<style>
body {
padding-top: 70px;
margin-left: 200px;
}
</style>
</head>
<body>
<select class="selectpicker" data-width="75%" data-live-search="true" title="Wybierz urządzenie...">
<optgroup label="Producent1">
<option><a href="#">Maszyna 1</a></option>
<option>Maszyna 2</option>
<option>Maszyna 3</option>
</optgroup>
<optgroup label="Producent1">
<option>Maszyna 1</option>
<option>Maszyna 2</option>
<option>Maszyna 3</option>
</optgroup>
</select>
<br>
<br>
<br>
<br>
<button type="button" data-width="75%" class="btn btn-lg btn-danger">Szukaj!</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.bundle.min.js"></script>
<script src="../dist/js/bootstrap-select.js"></script>
</body>
</html>

检查一下： html 文件：

<form action="page.php" method="post">
<div class="form-group">
<label for="selectedItem"> select:</label>
<select class="form-control" id="selectedItem" name="selectedItem">
<optgroup label="Producent1">
<option value="Maszyna1">Maszyna 1</option>
<option value="Maszyna2">Maszyna 2</option>
<option value="Maszyna3">Maszyna 3</option>
</optgroup>
<optgroup label="Producent2">
<option value="Maszyna4">Maszyna 4</option>
<option value="Maszyna5">Maszyna 5</option>
<option value="Maszyna6">Maszyna 6</option>
</optgroup>
</select>
</div>
<button type="submit" id="btnRedirect" data-width="75%" class="btn btn-lg btn-danger">Szukaj!</button>
</form>

页.php文件：

<?php
$addresses=array(
'Maszyna1'=>'https://facebook.com',
'Maszyna2'=>'https://google.com',
'Maszyna3'=>'https://twitter.com/',
);
if (isset($_POST['selectedItem']) && !empty($_POST['selectedItem'])){
$selectedItem=$_POST['selectedItem'];
foreach ($addresses as $key=> $address){
if ($selectedItem===$key)
header("Location:".$address);
}
}
?>

将其放入具有操作和方法属性的表单标记中，并更改要提交的按钮类型。像这样：

<div class="container">
<div class="form-group">
<label for="selectedItem"> select:</label>
<select class="form-control" id="selectedItem" name="selectedItem">
<optgroup label="Producent1">
<option value="https://www.facebook.com/">Maszyna 1</option>
<option value="https://www.google.com/">Maszyna 2</option>
<option value="Maszyna3">Maszyna 3</option>
</optgroup>
<optgroup label="Producent2">
<option value="Maszyna3">Maszyna 3</option>
<option value="Maszyna4">Maszyna 4</option>
<option value="Maszyna5">Maszyna 5</option>
</optgroup>
</select>
</div>
<button type="submit" data-width="75%" class="btn btn-lg btn-danger">Szukaj!</button>

相关内容

最新更新

热门标签：