用下拉列表填充HTML页面

Populate HTML Page with Dropdown List

本文关键字：页面 HTML 填充 下拉列表      更新时间：2023-09-26

我正在尝试根据从下拉框中选择的选项将进一步的文本插入HTML页面。

例如，如果用户从下拉列表中选择"UK"，我希望在其正下方显示文本"the capital city of UK is London"。

额外的文本是一个段落长，如果额外的文本是添加从一个单独的HTML文件，以减少主HTML页面文件的大小会更好吗?

我找到了下面的链接，这是否适合15段的文本，15个值各一个。

<!DOCTYPE html>
<html>
<body>
<form action="action_page.php">
  <select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>
  <br><br>
  <input type="submit">
</form>
</body>
</html>

来源:http://www.w3schools.com/html/tryit.asp?filename=tryhtml_elem_select

从上面的例子中，我似乎找不到PHP文件。

感谢您的阅读。

如果将其放在单独的html文件中，则需要另一个请求来获取文本信息。

我会将其直接放入标记并根据下拉列表中选择的值显示或不显示它。这会使html文件变大一些，但性能应该比每次点击都发送请求要好。

除了性能它是重要的SEO，谷歌不执行每一个javascript，不能得到段落的信息，如果你通过ajax加载它。

特别是因为大多数web服务器提供压缩的内容，一些更多的字节不会破坏你的html文件-瓶颈将是服务器往返的延迟。

下面是一个jQuery脚本的快速解决方案。

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(function() {
            $('.info').hide();
            $('#countryList').on('change', function() {
                $('.info').hide();
                var countryCode = $('#countryList').val();
                $('.info.' + countryCode).show();
            });
        });
    </script>
</head>
<body>
<select id="countryList">
    <option value="">[Select Country]</option>
    <option value="DK">Denmark</option>
    <option value="DE">Germany</option>
    <option value="SE">Sweden</option>
    <option value="RO">Romania</option>
    <option value="UK">United Kingdom</option>
</select>
<div class="info DK">Copenhagen is the capital of Denmark.</div>
<div class="info DE">Berlin is the capital of Germany.</div>
<div class="info SE">Stockholm is the capital of Sweden.</div>
<div class="info RO">Bucharest is the capital of Romania.</div>
<div class="info UK">Londaon is the capital of the United Kingdom.</div>
</body>
</html>

这是一个处理动态显示/隐藏块的简单方法。

关于您的问题，"如果从单独的HTML文件添加额外的文本会更好吗?"Stefan Niedermann是对的，只需将其存储在标记中。尤其是如果只有70到100个单词。如果有很多详细的信息需要输入，另一种选择是将这些内容存储在数据库中，然后通过AJAX检索。

现在，如果这70到100个单词中的许多重复，即。"X是Y的大写"，"Y有Z的人口"等等，然后你可以稍微调整一下jQuery把这些细节放到一个数组中，只有一个显示div，然后动态地用这些位填充那个div的内容。

我误解了这个问题，但我的答案仍然是使用包含所需信息的对象的json-array，然后根据所选择的制造商/国家填充div。

JSON数据看起来像这样:

[
  {
    manufacturer: 'Volvo',
    description: 'Volvo is blabla...'
  },
  {
    manufacturer: 'BMW',
    description: 'BMW is blabla...'
  }  
]

老回答:

我的建议是使用json-object根据设置的国家来存储城市。然后从json中加载下拉列表。它还可以很容易地改变下拉列表的内容…

就像这样:

var countries = [
  {
    country: "England",
    cities: [
    	"London",
      "York",
      "Manchester"
    ]
  },
  {
    country: "France",
    cities: [
    	"Paris",
      "Lyon"
    ]
  }
]
var countryDropdown = document.getElementById('country-dropdown');
var cityDropdown = document.getElementById('city-dropdown');
var populateCountries = function() {
  var countryOptions = '';
  for(var i = 0; i < countries.length; i++) {
    var option = document.createElement('option');
    option.value = i;
    option.innerHTML = countries[i].country;
    countryOptions += option.outerHTML;
  }
  countryDropdown.innerHTML = countryOptions;
}
var populateCities = function(countryIndex) {
  var cityOptions = '';
  for(var i = 0; i < countries[countryIndex].cities.length; i++) {
    var option = document.createElement('option');
    option.value = i;
    option.innerHTML = countries[countryIndex].cities[i]
    cityOptions += option.outerHTML;
  }
  cityDropdown.innerHTML = cityOptions;
}
populateCountries();
populateCities(0);
countryDropdown.onchange = function(e) {
	populateCities(this.value);
}
<select id="country-dropdown">
</select>
<select id="city-dropdown">
</select>

相关文章：