如何允许用户创建自己的选项

时间:2018-06-03 11:01:28

标签: javascript html options datalist

所以我有几行代码可以让用户选择一个开始和端点,一旦被选中,他们点击链接并被重定向到已经为他们设定了指示的谷歌地图页面。我正在尝试添加一个功能,使用户可以将自己的选项保存为位置。如果没有上下文,这就没什么意义,所以继承我的代码:

<DOCTYPE html>
<html>
<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").href = link; 
    }
</script>

<meta charset="utf-8">
<title>ISHGUIDE</title>
</head>
<link rel="stylesheet" type="text/css" href="style.css">

<div class=naviselection>
    Start:
    <input type='text' list='startinput' id="start" onchange="updateNavigationLink()" />
    <datalist id="startinput" >  
    <option value="The International School of The Hague, Wijndaelerduin 1, 2554 BX Den Haag">School</option>
    <option value="Centrum, Den Haag">City Center</option>      
</datalist>   

    End:
    <input type="text" id="end" list="endinput" onchange="updateNavigationLink()"/>
        <datalist id="endinput" >
        <option value="The International School of The Hague, Wijndaelerduin 1, 2554 BX Den Haag">School</option>
        <option value="Centrum, Den Haag">City Center</option>      
    </datalist>
</div>

<div class=Finallink>
    <a id="navigationLink">NAVILINK</a>         
</div>

我想创建一个功能,在该功能中,用户可以将位置保存为不同的选项,例如:

位置:在这里放置位置
姓名:PUT NAME HERE

他们可以将他们的住宅地址放在位置栏中,并将选项栏中的“home”。然后,这行代码将添加到我的脚本中:

<option value="house address">HOME</option>

我将如何创建此功能并确保其按照我的意愿运行。

感谢您的帮助,非常感谢。

0 个答案:

没有答案