HTML-форма выберите штат и город

0

Я не уверен, что этот вопрос в нужном месте, поэтому приношу свои извинения, если нет. Я использую раскрывающуюся форму, чтобы выбрать состояние, которое при щелчке переходит на страницу состояния. Тем не менее, я хотел бы иметь возможность настраивать форму, чтобы при щелчке по клику рядом с ней загружалось города в этом состоянии. Когда город щелкнет, он перейдет на правильную страницу. Не знаю, как это сделать, встраиваемая форма состояния, которую я использую в данный момент, ниже:

<div align="center">
  <form>
    <select name="URL" onchange="window.location.href=this.form.URL.options[this.form.URL.selectedIndex].value">
      <option selected="selected" value="">Select State Name</option>
      <option value=" state link page</option>
    </select>
  </form>
</div>

благодаря

Андрей

  • 0
    <option value=" state link page" >State Name</option> !!!
  • 0
    Если вы открыты для использования новых технологий, вы можете сделать это очень быстро и легко с любым количеством библиотек Javascript (особенно Angular.js)
Показать ещё 1 комментарий
Теги:

3 ответа

3

обновленный

Использование JavaScript для получения городов из массива, связанных с состояниями в списке выбора

Пример:

Изображение 174551

1) Выберите штат Калифорния, и появится новый раскрывающийся список, и вам будет сообщено Selected State: California

Изображение 174551

2) Если вы выберете город Los Angeles, вам cites/los_angeles.html: cites/los_angeles.html

Код: код должен быть довольно легко реплицироваться, но если вы хотите, чтобы я объяснил вам, как добавить в большее количество городов/штатов, я могу.

<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<style type="text/css">
body{
    background-color: #EEEEEE;
    font-family: "Open Sans";
    font-size: 16px;
    text-align: center;
}
.center{
    margin: auto;
    width: 425px;
}
.selector{
    font-family: "Open Sans";
    font-size: 18px;
    width: 425px;
    margin-left: auto;
margin-right: auto;
    position: relative;   
    text-align: center;
}
.heading{
    font-family: "Open Sans";
    font-size: 32px;
    text-align: center;
}
a{
    text-decoration: none;
    color: #F00;
}
</style>
<script type="text/javascript">
function stateSelected(){ 
    var s = document.getElementById("stateSelect");
    var californiaCities = new Array("Los Angeles", "San Francisco");
    var texasCities = new Array("Houston", "Dallas");
        var title = document.createElement("p");
        title.innerHTML = "Select a city:"
        title.className = "heading";
        document.body.appendChild(title);
        switch(s.options[s.selectedIndex].value){
            case "stateCalifornia":
                createSelector(californiaCities, s);
                break;
            case "stateTexas":
                createSelector(texasCities, s);
                break;
        }
}
function createSelector(array, s){
    var sState = document.createElement("p");
    sState.innerHTML = "Selected State: " + s.options[s.selectedIndex].text;
    document.body.appendChild(sState);
    var sTitle = document.getElementById("sTitle");
    sTitle.parentNode.removeChild(sTitle);
    s.parentNode.removeChild(s);
    var newSelect = document.createElement("select");
    var holder = document.createElement("div");
    holder.className = "center";
    var selectOption = document.createElement("option");
    selectOption.selected = "selected";
    selectOption.value = "";
    selectOption.text = "Select a city";
    newSelect.appendChild(selectOption);
    for(var i = 0; i < array.length; ++i){
            var newOption = document.createElement("option");
            newOption.value = "city" + array[i].replace(/\s+/g, '');
            newOption.text = array[i];
            newSelect.onchange = townSelected;
            newSelect.id = "citySelect";
            newSelect.appendChild(newOption);
    }
    newSelect.className = "selector";
    holder.appendChild(newSelect);
    document.body.appendChild(holder);
}
function townSelected(){
    var c = document.getElementById("citySelect");
    window.location.href = "cities/" + c.options[c.selectedIndex].text.replace(/\s+/g, '_').toLowerCase() + ".html";
}
</script>
</head>
<body>
Made a mistake? <a href="#" onclick="location.reload()">Start Again</a>
</br>
<p id="sTitle" class="heading">Select a state:</p>
<div class="center">
<select id="stateSelect" onchange="stateSelected();" class="selector">
<option value="" selected="selected">Select a state</option>
<option value="stateCalifornia">California</option>
<option value="stateTexas">Texas</option>
</select>
</div>
</body>
</html>

Как добавить другие города:

В массивах, например californiaCities, говорится: var californiaCities = new Array("Los Angeles", "San Francisco"); , Чтобы добавить другой город, просто измените массив на var californiaCities = new Array("Los Angeles", "San Francisco", "San Diego"); , и createSelector() сделает все это для вас

Как добавить несколько состояний (немного сложнее):

В поле выбора selectState добавьте еще один параметр, пытаясь придерживаться того же формата (stateStateName):

<option value="stateNewYork">New York</option>

Затем создайте массив, например, для californiaCities:

var newYorkCities = new Array("New York City", "Albany");

Затем в операторе switch под ним добавьте следующее в предыдущем break; выражение:

case "stateNewYork":
     createSelector(newYorkCities, s);
     break;

Резюме: Итак, теперь у вас будет что-то вроде:

(HTML) Селектор состояний:

<select id="stateSelect" onchange="stateSelected();" class="selector">
<option value="" selected="selected">Select a state</option>
<option value="stateCalifornia">California</option>
<option value="stateTexas">Texas</option>
<option value="stateNewYork">New York</option>
</select>

(JavaScript) Объявление массива:

var californiaCities = new Array("Los Angeles", "San Francisco", "San Diego");
var texasCities = new Array("Houston", "Dallas");
var newYorkCities = new Array("New York City", "Albany");

(JavaScript) Оператор Switch:

switch(s.options[s.selectedIndex].value){
        case "stateCalifornia":
            createSelector(californiaCities, s);
            break;
        case "stateTexas":
            createSelector(texasCities, s);
            break;
        case "stateNewYork":
            createSelector(newYorkCities, s);
            break;
}
Поделиться
  • 0
    Спасибо за ответ. Я не уверен, правильно ли я вас понимаю. В основном я уже имею в виду то, что вы упомянули выше. Например, когда кто-то нажимает «Калифорния», он уже переходит на страницу «Калифорния». То, что я надеялся сделать, было иметь 2 поля, одно с состоянием, как указано выше, и когда состояние выбрано, поле под этим заполняется городами (которые имеют статические страницы), которые я настроил. При нажатии на второй вариант (город) пользователь попадет на эту страницу. Надеюсь, что это проясняет?
  • 0
    Чтобы подвести итог: нажмите на государство, затем нажмите на город (где город имеет ссылку HTML). Еще раз спасибо за ваше время.
Показать ещё 11 комментариев
1

Как насчет использования IFrame. Это можно было бы сделать гораздо лучше, используя AJAX, если бы вы хотели использовать библиотеку, такую как JQuery, где вместо этого вы используете .load на DIV. Но без JQuery вы могли бы сделать:

HTML:

<div align="center">
    <form>
        <select id="selectBox" name="URL">
            <option selected="selected" value="">Select State Name</option>
            <option value="florida">Florida</option>
            <option value="texas">Texas</option>
        </select>
        <iframe id="statePage"></iframe>
    </form>
</div>

JavaScript:

selectionChange = function() {
    var elStatePage = document.getElementById('statePage'); 
    elStatePage.src = 'states/' + this.value + '.htm';
}

var e = document.getElementById('selectBox'); 
e.onchange = selectionChange;

JSFiddle: http://jsfiddle.net/zXz8s/

Поделиться
  • 0
    Ух ты - это много советов за такой короткий период! Большое спасибо. Я не очень полезен, когда дело доходит до кодирования. Это на сайте WordPress, где я хочу сделать навигацию проще. Конкретная тема, которую я использую, не подходит для длинных меню, поэтому я хотел, чтобы раскрывающийся список выделился на главной странице, и когда он выбран, зритель попадает на жестко закодированную страницу. Я попробую приведенные выше предложения - если есть более простой способ, пожалуйста, дайте мне знать. Еще раз спасибо!
1 
<div align="center">
  <form>
    <select name="URL" onchange="window.location.href=this.value">
      <option selected="selected" value="">Select State Name</option>
      <option value="state link page">State Name</option>
      <option value="state link page">State Name</option>
    </select>
  </form>
</div>

на странице состояния

<div align="center">
  <form>
    <select name="cities" onchange="window.location.href=this.value">
      <option selected="selected" value="">Select State Name</option>
      <option value="City link page">City Name</option>
      <option value="City link page">City Name</option>
    </select>
  </form>
</div>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню