Заполнение HTML-страницы с раскрывающимся списком

Я пытаюсь вставить дополнительный текст в HTML-страницу на основе опции, выбранной из раскрывающегося списка.Заполнение HTML-страницы с раскрывающимся списком

Например, если пользователь выбирает «UK» из выпадающего списка, прямо под текстом «Город столицы Великобритании является Лондоном».

Дополнительный текст - это длинный абзац, было бы лучше, если бы дополнительный текст был добавлен из отдельного 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, хотя из приведенного выше примера.

Большое спасибо за чтение.

источник

2016-10-24 S Hu

в идеале вы хотите установить кук, и освежить страницы и помещены на серверном сервере на подходящем языке. – Tschallacka

Можете ли вы дать нам свою текущую попытку? Что-то сработает. Это общий вопрос. – bflemi3

Просто отредактированный, чтобы показать пример, который я рассматривал, но я не могу найти файл PHP, который, по-видимому, используется. –

Если вы поместите его в отдельный HTML-файл, вам понадобится другой запрос для получения текстовой информации.

Я бы поместил его непосредственно в разметку и отобразил его или нет, в зависимости от выбранного значения в выпадающем списке. Это делает HTML-файл более крупным, но производительность должна быть лучше, чем отправка запроса при каждом нажатии.

Помимо производительности это важно для SEO, Google не выполняет каждый яваскрипт и не может получить информацию о пунктах, если вы загрузите его с помощью AJAX.

Тем более, что большинство веб-серверов доставляют контент gzipped, еще несколько байтов не взорвут ваш HTML-файл - узким местом будет латентность сервера-roundtrip.

источник

2016-10-24 12:18:19

Большое спасибо за ваше предложение. Будет ли это так, если будет около 15 абзацев текста, по одному для каждого из 15 значений? –

Сколько текста мы говорим? Я думаю, что если все это вместе займет 1-2 кБ, это еще лучшее решение. –

Приблизительно от 70 до 100 слов. –

Это быстрое решение с примером сценария 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-файла, - говорит Стефан Нидерманн, просто сохраните его в разметке. Особенно, если это всего лишь от 70 до 100 слов. Если у вас есть много подробной информации, чтобы втянуть, другой вариант состоял бы в том, чтобы сохранить это содержимое в базе данных и получить его через AJAX.

Теперь, если многие из этих 70 - 100 слов повторяются, то есть «X является столицей Y», «Y имеет совокупность Z» и т. Д., Тогда вы можете немного настроить jQuery и поместить эти детали в массив, просто один дисплей div, а затем динамически заполнять содержимое этого div этими битами.

источник

2016-10-24 12:45:09

Спасибо за это. Будет ли этот метод иметь преимущества SEO? –

Добро пожаловать. Если вы поместите данные в div, они будут проиндексированы поисковыми системами. Но обычно не рекомендуется пытаться индексировать скрытый контент. См. Http://stackoverflow.com/questions/514659/does-google-index-pages-with-hidden-divs. –

Также вы можете присвоить классу .info свойство display: none в вашем css и удалить первый $ ('. Info'). Hide(); заявление. Таким образом, если у вас много div (или медленное соединение), они не будут * мигать *, когда страница загружается. Это просто быстрый, самодостаточный пример, демонстрирующий эту идею. Удачи с вашим проектом. –

Я неправильно понял вопрос, но я бы все же хотел использовать массив json, содержащий объекты с необходимой информацией, а затем заполнить div в зависимости от того, какой производитель/страна выбрана.

JSON данные будут выглядеть следующим образом:

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

OLD Ответ:

Мое предложение было бы использовать JSON-объект для хранения города в зависимости от страны была установлена. Затем загрузите выпадающий список из json. Было бы также сделать это очень легко изменить содержимое выпадающего-лист ...

Так, что-то вроде этого:

var countries = [ 
 
    { 
 
    country: "England", 
 
    cities: [ 
 
    \t "London", 
 
     "York", 
 
     "Manchester" 
 
    ] 
 
    }, 
 
    { 
 
    country: "France", 
 
    cities: [ 
 
    \t "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) { 
 
\t populateCities(this.value); 
 
}

<select id="country-dropdown"> 
 
</select> 
 

 
<select id="city-dropdown"> 
 
</select>

источник

2016-10-24 12:54:01 Michael

Заполнение HTML-страницы с раскрывающимся списком

ответ

Смежные вопросы