Warm tip: This article is reproduced from stackoverflow.com, please click
html twitter-bootstrap

bootstrap dropdown choose confirm by button

发布于 2020-04-08 09:28:49

after selecting the item from dropdown the user will confirm the selection by clicking the button. and then has to move it to the page assigned to this item how to do it? after selecting the item from dropdown the user will confirm the selection by clicking the button. and then has to move it to the page assigned to this item how to do it?

thanks :)

<!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>
Questioner
Wiiiciu
Viewed
62
Hamzeh 2020-02-01 09:13

check this: html file:

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

page.php file:

<?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);
 }
}
?>