jQuery Mobile: Basic drop down or select menu

This entry is part 66 of 73 in the series jQuery Mobile

This is the familiar drop down or select menu.  

This is the so called native drop down menu as constructing it is similar to constructing a web page drop down menu using Javascript.

<!DOCTYPE html>
<html>
<head>
    <link href='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js'></script>
    <title>Upwhere</title>
</head>
<body>
<div data-role='page'>
    <div data-role='header' data-theme='b'>
        <h1>Welcome To My Drop Down Menu App</h1>
    </div>

    <div data-role='content'>
        <form>
            <div class='ui-field-contain'>
                <select name='select-native-1' id='select-native-1'>
                    <option value='1'>The 1st Option</option>
                    <option value='2'>The 2nd Option</option>
                    <option value='3'>The 3rd Option</option>
                    <option value='4'>The 4th Option</option>
                </select>
            </div>
        </form>
    </div>

    <div data-role='footer' data-position='fixed'>
        <h4 style='text-align:center;'>I'm the footer</h4>
    </div>
</div>

</body>
</html>
Try The Code

PHP: Creating a dropdown list using PHP

This entry is part 50 of 54 in the series PHP Tutorial

Now instead of getting the selected value from a dropdown list, let’s use PHP to create a dropdown list.

To create a list, we need to understand a bit more about array, especially associative array.

<?php
$arr = array('one'=>'ONE', 'two'=>'TWO', 'three'=>'THREE');

foreach ($arr as $key => $value) {
    echo "Key: $key; Value: $value<br />";
}
?>

Please try to run the code here.

The foreach statement allows us to print out the key value pair.

This key value combination is what we need for creating a dropdown list.

<select name='dropdown'>

    <?php

    $car = array('bmw' => 'BMW', 'renault' => 'Renault', 'toyota' => 'Toyota');
    $length = count($car);

    foreach ($car as $key => $value) {
        echo "<option value=\'$key\'>$value</option>";
    }

    ?>
</select>

Please try to run the code here.