这是非常基本的，我是初学者 [英] This is very basic, im a beginner

问题描述

我刚刚进入娱乐目的的代码，并陷入了一个特别不满的情况。我正在尝试为用户提供开始和结束位置的选项。他们必须为开始选择一个选项（地址），为结束选择一个（地址）。他们的输入将被输入以下链接：



http://maps.google.com/maps?saddr=\"option被选为起始位置& daddr =为最终位置选择的选项



一旦用户输入实际完成，将生成此链接...



我将非常感谢你的帮助，并恳请你帮助我...



我的尝试：



请不要判断我的可怕编码。

我尝试这样做：

Ive just recently gotten into code for entertainment purposes and have fallen upon a particularly dissatisfying situation. I'm trying to provide the user with options for a start and end location. They must select one of the options (an address) for the start, and one (an address again) for the end. Their input will then be put into this following link:

http://maps.google.com/maps?saddr="option chosen for start location" &daddr="option chosen for end location"

This link will be made once the user input is actually completed...

I would appreciate your help a considerable amount and implore you to help me please...

What I have tried:

Please don't judge my terrible coding.
I tried making it by doing this:

<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...

推荐答案

首先，你必须修复你的价值属性：你需要遵循 value =...语法，而不是 value：... 。还要为选择添加结束标记，并且不能在选择中放置开始。

First, you'll have to fix your "value" attributes: you need to follow the value="..." syntax, not value: .... Also add closing tags for select, and you cannot put "Start" inside the 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下添加一个元素，你可以把链接放在：

Then, to get the link you want, you need to use JavaScript. You need to have a place to put the link in first, so add an element under your div where you can put the link in:

<span id="navigationLink"></span>

然后，JavaScript。在 head -tag中，添加一个带有以下内容的脚本标记：

Then, the JavaScript. In your head-tag, put a script tag with these contents:

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 确保将值转换为有效的URI组件（ encodeURIComponent（） - JavaScript | MDN [ ^ ]）。



最后，你需要确保在实际调用此函数时您更改选定的值。为此，将 onchange =updateNavigationLink（）属性添加到选择标记：

updateNavigationLink is the function responsible for updating the text of the element where the URL will be. encodeURIComponent makes sure to transform the values into valid URI components (encodeURIComponent() - JavaScript | MDN[^]).

Lastly, you need to make sure that this function actually gets called when you change the selected value. For that, add the onchange="updateNavigationLink()" attribute to both select tags:

<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 [ ^ ]

这篇关于这是非常基本的，我是初学者的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！