Member 13855652 Ответов: 1

Это очень просто, я новичок

Я только недавно вошел в код для развлекательных целей и попал в особенно неудовлетворительную ситуацию. Я пытаюсь предоставить пользователю варианты начального и конечного местоположения. Они должны выбрать один из вариантов (адрес) для начала и один (снова адрес) для конца. Затем их вклад будет помещен в эту следующую ссылку:

вариант http://maps.google.com/maps?saddr="выбрали для начала расположение" &амп;вариант daddr="выбрали для расположения конца"

Эта ссылка будет сделана после того, как пользовательский ввод будет фактически завершен...

Я был бы очень признателен Вам за помощь и умоляю вас помочь мне, пожалуйста...

Что я уже пробовал:

Пожалуйста, не судите меня за ужасное кодирование.
Я пытался сделать это, делая это:

<div class=naviselection>
            
            <select id='start'>    
            Start:
            <option value: The International School of The Hague, Wijndaelerduin 1, 2554 BX Den Haag>School</option>
            <option value: Centrum, Den Haag>City Center</option>
              
            
            End: 
            <select id='end'>
            <option value: The International School of The Hague, Wijndaelerduin 1, 2554 BX Den Haag>School</option>
            <option value: Centrum, Den Haag>City Center</option>
            </div>

But from here I'm no longer certain as to what I'm supposed to do, how do I include the result of the selection into their respective locations in the link...

1 Ответов

Рейтинг:
5

Thomas Daniels

Во-первых, вам нужно будет исправить свои атрибуты "ценности": вам нужно следовать value="..." синтаксис, а не value: .... Также добавьте закрывающие теги для select, и вы не можете поставить "старт" внутри select.

<div class=naviselection>
  Start:
  <select id='start'>    
            <option value="The International School of The Hague, Wijndaelerduin 1, 2554 BX Den Haag">School</option>
            <option value="Centrum, Den Haag">City Center</option>
            </select> End:
  <select id='end'>
            <option value="The International School of The Hague, Wijndaelerduin 1, 2554 BX Den Haag">School</option>
            <option value="Centrum, Den Haag">City Center</option>
            </select>
</div>

Затем, чтобы получить нужную ссылку, вам нужно использовать JavaScript. Сначала вам нужно найти место для размещения ссылки, поэтому добавьте элемент под вашим div, куда вы можете поместить ссылку:
<span id="navigationLink"></span>

Затем - JavaScript. В вашем head-тег, поставь script тег с этим содержимым:
function updateNavigationLink() {
    var link = "https://maps.google.com/maps?saddr=" + encodeURIComponent(document.getElementById("start").value) + "&daddr=" + encodeURIComponent(document.getElementById("end").value);
    document.getElementById("navigationLink").textContent = link;
}

updateNavigationLink это функция, ответственная за обновление текста элемента, где будет находиться URL-адрес. encodeURIComponent делает, что преобразование значений в допустимых компонентов Ури (encodeURIComponent() - JavaScript | MDN[^]).

Наконец, вы должны убедиться, что эта функция действительно вызывается при изменении выбранного значения. Для этого добавьте onchange="updateNavigationLink()" атрибут для обоих select теги:
<div class=naviselection>
  Start:
  <select id='start' onchange="updateNavigationLink()">    
            <option value="The International School of The Hague, Wijndaelerduin 1, 2554 BX Den Haag">School</option>
            <option value="Centrum, Den Haag">City Center</option>
            </select> End:
  <select id='end' onchange="updateNavigationLink()">
            <option value="The International School of The Hague, Wijndaelerduin 1, 2554 BX Den Haag">School</option>
            <option value="Centrum, Den Haag">City Center</option>
            </select>
</div>
<span id="navigationLink"></span>

Живая демонстрация: JSFiddle[^]

Member 13855652

Томас, моя признательность и благодарность непостижимы, большое тебе спасибо

Thomas Daniels

Всегда пожалуйста!

Member 13855652

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

Thomas Daniels

Я не уверен, как вы хотите "интегрировать форму в тег опции", но то, что вы можете сделать, - это интегрировать опцию в форму.

Member 13855652

ну, если у меня есть различные варианты, как показано ниже:
начало:
Центр
Школа
Ваше местоположение=введите местоположение здесь

Конец:
Центр
Школа
Ваше местоположение=введите здесь местоположение.

Томас еще раз я должен поблагодарить тебя за то, что ты действительно помог мне здесь

Thomas Daniels

Я действительно не понимаю, что ты имеешь в виду.

Member 13855652

Ну, мое объяснение кажется неадекватным. В принципе, я хочу дать пользователю возможность выбрать либо центр, либо школу, либо ввести свой собственный адрес.

Thomas Daniels

Ах. Есть в <тип входного="текст"и GT; тег

Member 13855652

да, именно так, но как бы я включил этот тег в свои варианты?

Thomas Daniels

Вы не добавляете его в свой тег опций. Добавьте его отдельно в свою форму.

Member 13855652

О-О-О, это действительно имеет больше смысла. Томас Я не могу отблагодарить тебя больше ты практически сделал мой день. Спасибо.