HTML-在 <select>标签

Question

我有一个城市清单。

<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作为语言

我有一个解决方案，但尚未实现，因为它没有效果！ 任何简单有效的方式将不胜感激。

提前致谢 ：）

Answer 1

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

Answer 2

只需检查数据库中的值，然后使用javascript或php将所选内容添加到该选项

 <option value="murree" selected >Murree</option>

Answer 3

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

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

这样做时，请与从数据库中检索到的值进行比较。 如果匹配，则selected添加。

Answer 4

一种可能的解决方案是按照以下方式将代码结构更改为更多形式：

// 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>';

Answer 5

与JQuery

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

工作演示

从这里