Question

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

例如，如果用户选择＆＃39; UK＆＃39;从下拉列表中，我希望文本＆＃39;英国的首都是伦敦＆＃39;

附加文本是段落长，如果从单独的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文件。

非常感谢阅读。

Answer 1

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

我会将其直接放入标记并显示与否，具体取决于下拉列表中的选定值。这使得HTML文件更大，但性能应该优于每次点击发送请求。

除了效果，它对于SEO 非常重要，Google不执行每个javascript，如果您通过ajax加载它，则无法获取段落的信息。

特别是因为大多数Web服务器都提供gzip压缩的内容，所以更多的字节不会破坏你的HTML文件 - 瓶颈就是服务器往返的延迟。

Answer 2

这是一个使用示例jQuery脚本的快速解决方案。

<div align="justify" style="text-align: center">
    <div>
        <table cellspacing="0" rules="all" border="1" id="ContentPlaceHolder1_grd_reminder" style="width:555px;border-collapse:collapse;">
            <tr>
                <th class="grdheading2" scope="col">Book</th>
                <th class="grdheading2" scope="col">Issue Date</th>
                <th class="grdheading2" scope="col">Submition Date</th>
            </tr>
            <tr>
                <td>
                    <span id="ContentPlaceHolder1_grd_reminder_Label1_0">Engineering Mechanics</span>
                </td>
                <td>
                    <span id="ContentPlaceHolder1_grd_reminder_Label2_0">17-Oct-2016</span>
                </td>
                <td>
                    <span id="ContentPlaceHolder1_grd_reminder_Label3_0">31-Oct-2016</span>
                </td>
            </tr>
            <tr>
                <td>
                    <span id="ContentPlaceHolder1_grd_reminder_Label1_1">ATB of Engineering Mathematics</span>
                </td>
                <td>
                    <span id="ContentPlaceHolder1_grd_reminder_Label2_1">17-Oct-2016</span>
                </td>
                <td>
                    <span id="ContentPlaceHolder1_grd_reminder_Label3_1">31-Oct-2016</span>
                </td>
            </tr>
        </table>
    </div>
</div>

这是处理动态显示/隐藏片段的简便方法。

关于你的问题，“如果从单独的HTML文件添加附加文本会更好吗，”Stefan Niedermann是对的，只需将其存储在标记中。特别是如果它只有70到100个单词。如果您需要提供大量详细信息，另一种选择是将该内容存储在数据库中并通过AJAX检索它。

现在，如果70到100个单词中的许多单词重复出现，即“X是Y的大写”，“Y有Z的总数”等，那么你可以稍微调整jQuery并将这些细节放入一个数组，只有一个显示div，然后使用这些位动态填充该div的内容。

Answer 3

我误解了这个问题，但我的答案仍然是使用包含所需信息的对象的json数组，然后根据选择的制造商/国家/地区填充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>

使用下拉列表填充HTML页面

3 个答案: