HTML - 在<select>标签中选择默认选项</select>

时间:2012-12-27 10:10:45

标签: php html html5

我有一份城市名单。

<select name="cities">
    <option value="nc">New city..</option>
    <option value="quetta">Quetta</option>
    <option value="karachi">Karachi</option>
    <option value="islamabad">Islamabad</option>
    <option value="khyber pukhtun khuan">Khyber Pukhtun Khuan</option>
    <option value="multan">Multan</option>
    <option value="murree">Murree</option>
    <option value="gwadar">Gwadar</option>
    <option value="gujranwala">Gujranwala</option>
    <option value="faisalabad">Faisalabad</option>
    <option value="peshawar">Peshawar</option>
</select>

我有一个数据库,我已经存储了用户的城市。现在我正在制作一个页面,用户将更新他的城市,为此我希望用户在打开页面时看到他的城市已被选中。简而言之,我希望根据数据库返回的值选择一个选项。我使用php作为语言

我有一个解决方案但尚未实施,因为它没有效率!任何简单有效的方式都会受到赞赏。

提前致谢:)

5 个答案:

答案 0 :(得分:4)

//first you have a specific city of a user

$user_city = 'city-name';

//Then you have a list of all cities available (probably from the database,
// but I use array here as an example)

$cities = array('city1','city2','city3');

<select name="cities">
   <?php
       foreach ( $cities as $city ) {
           if ( $city == $user_city ) {
              echo "<option value='".$city."' selected>$city</option>";
           } else {
              echo "<option value='".$city."'>$city</option>";
           }
       }
   ?>
</select>

答案 1 :(得分:1)

只需检查数据库中的值,然后使用javascript或php

将所选内容添加到该选项中
 <option value="murree" selected >Murree</option>

答案 2 :(得分:1)

将您的城市列表放入数组而不是硬编码HTML。

遍历列表并为每个元素输出option元素。

执行此操作时,请与从数据库中检索的值进行比较。如果匹配,请添加selected

答案 3 :(得分:0)

一种可能的解决方案是将代码结构更改为以下内容:

// hardcoded cities or perhaps loaded from elsewhere
$cities = [
    "nc"        => "New city...",
    "quetta"    => "Quetta",
    "karachi"   => "Karachi"
    // ...
];

// user's city fetched from the database
$userCity = "quetta";

echo '<select name="cities">';
foreach ($cities as $key => $value)
{
    echo '<option ' . ($userCity === $key ? 'selected' : '') . ' value="' . $key . '">' . $value . '</option>';
}
echo '</select>';

答案 4 :(得分:-1)

使用JQuery

$(function() {
    $("#gate").val('Gateway 2');
});

Working Demo

from here