从多选 - 单击按钮时，它应该连接字符串并转到 URL答案

【问题标题】：From Multiple Select - When Button is clicked it should concatenate the strings and Go to the URL从多选 - 单击按钮时，它应该连接字符串并转到 URL
【发布时间】：2013-12-04 10:17:39
【问题描述】：

当用户从以下 Select 中选择选项并单击按钮时...值应该是连接的并且应该转到特定的 url！

例如，如果用户选择 product2 & product6 & product8，则在单击按钮时，应连接值并创建并转到该 url，例如 example.com/268

<select id="one">
    <option value="default">Select Product</option>
    <option class="s" value="1">product1</option>
    <option class="q" value="2">product2</option>
    <option class="q" value="3">product3</option>
</select>

<select id="two">
    <option value="default">Select Version</option>
    <option class="l" value="4">product4</option>
    <option class="l" value="5">product5</option>
    <option class="c" value="6">product6</option>
</select>

<select id="three">
    <option value="default">Select OS</option>
    <option class="o" value="7">product7</option>
    <option class="o" value="8">product8</option>
    <option class="o" value="9">product9</option>
</select>

提前致谢！

【问题讨论】：

我在您的代码中看不到任何按钮，也看不到您希望使用的技术（纯 javascript、jQuery、mootools ...）。但最重要的是：我没有看到任何代表您解决这个问题的努力。你试过什么？你能告诉我们任何（非工作）代码吗？
我同意@Kippie 关于缺少随附代码的观点。我还假设您使用的是 JavaScript，但我只是注意到它不在您的标签中。
@Kippie - 是的，我没有包括我的努力......这是我的错误......但我认为我提供的代码足以理解这种 Html 表单的案例......和我不是 Java 程序员，所以我什至尝试编写 Java 代码都非常非常困难......但是感谢你们俩给它时间！
@Tumtum 非常感谢您提供解决方案...我急于尝试您提供的代码。谢谢！

标签： html forms url select concatenation

【解决方案1】：

这是一个使用您的代码的工作示例 :)

html:

<form id="myForm">
    <select id="one">
        <option value="default">Select Product</option>
        <option class="s" value="1">product1</option>
        <option class="q" value="2">product2</option>
        <option class="q" value="3">product3</option>
    </select>

    <select id="two">
        <option value="default">Select Version</option>
        <option class="l" value="4">product4</option>
        <option class="l" value="5">product5</option>
        <option class="c" value="6">product6</option>
    </select>

    <select id="three">
        <option value="default">Select OS</option>
        <option class="o" value="7">product7</option>
        <option class="o" value="8">product8</option>
        <option class="o" value="9">product9</option>
    </select>
        <input type="submit" value="Post" />
    </form>

javascript：

var myForm = document.getElementById("myForm");

myForm.addEventListener('submit', function(e) {
    e.preventDefault();
    var val1 = document.getElementById("one").value;
    var val2 = document.getElementById("two").value;
    var val3 = document.getElementById("three").value;
    if(val1 != "default" && val2 != "default" && val3 != "default")
        window.location.href = "http:www.example.com/" + val1 + val2 + val3;
    else
        alert("Fill out everything please!");
}, false);

还有一个 JSFiddle 可以看到它的实际效果：

http://jsfiddle.net/KfH9m/1

【讨论】：

简直太棒了@Tumtum，您提供的上述示例和代码完全解决了我的问题......非常感谢！