单击后带有额外数据的 HTML 下拉菜单

Posted 2023-02-16

【中文标题】单击后带有额外数据的 HTML 下拉菜单

【英文标题】：HTML drop down menu with extra data after click

【发布时间】：2014-10-29 16:28:01

【问题描述】：

我需要在 html 中创建一个下拉菜单。这个想法是，当我点击选项时，比如说一个城市，菜单下方会自动显示详细的联系信息。

例如。如果我选择伦敦，应该会自动显示街道地址、电话等。可以使用如下提交按钮，但最好没有。

<form action="process.php" method='post'>
<select name="cities">
<option value="London">London</option>
<option value="NY">NY</option>
<option value="Rome">Rome</option>
<option value="Paris">Paris</option>
</select>
<input type="submit" />
</form>

我的 HTML 不太好，非常感谢一些帮助

【问题讨论】：

我现在没有时间给你答案，但这需要javascript，所以你可能想把它添加到你的标签中，这样javascripters就可以找到你的问题。

@arteo 如果不想使用提交按钮，您可以使用 ajax 或者如果您正在使用提交按钮。在php中获取城市值并显示地址。

这些信息存储在哪里？是在服务器上吗？它在某处硬编码吗？反正你需要js。

【参考方案1】：

this (check this fiddle) 是你要找的吗？？

您所需要的只是关于 Javascript 或 Jquery 的想法。上面小提琴中的代码仅供示例或参考。为了更好的使用，请参考 Jquery Ajax。

代码是：

    $('#cities').change(function()
    var data = $('#cities :selected').val();
    document.getElementById("data").style.display = "block";
    if(data === "Paris")
        document.getElementById("data").innerHTML = "You have selected Paris";
    else if(data === "Rome")
        document.getElementById("data").innerHTML = "You have selected Rome";
    else if(data === "NY")
        document.getElementById("data").innerHTML = "You have selected NY";
    else if(data === "London")
        document.getElementById("data").innerHTML = "You have selected London";    
    else
        document.getElementById("data").style.display = "none";
);

【讨论】：

单靠JS能做到吗？帮助表示赞赏

是的，可以做到。请不要随心所欲，虽然它解决了目的，但它不是处理它的优化方式。