提交第二个下拉框 url javascript

Question

我的 JavaScript 有点生疏了。我有一个下拉菜单，其中包含所有汽车品牌，每个品牌的所有型号都有 URL link 可供选择。

选择品牌后，第二个下拉菜单中会出现一个型号。在 JavaScript 中有 URL link 提交后应该转到所需的 link.

所有代码都在JS里Fiddlelink

[JS Fiddle][1]

有人能帮帮我吗

提前致谢。

我的表单代码

<div class="box">
<p>
    <form name="myform" class="myform">
        <select>
            <option value="">CHOOSE YOUR VEHICLE</option>
            <option value="Isuzu">Isuzu</option>
            <option value="Ford">Ford</option>
            <option value="Nissan">Nissan</option>
            <option value="Mitsubishi">Mitsubishi</option>
            <option value="Toyota">Toyota</option>
            <option value="VW">VW</option>
        </select>
    </form>
    <br />
    <br />
    <form name="myform2" class="myform2">
        <br />
        <input type="button" name="go" value="Search" onclick="loadURL();">
    </form>
</p>

$('form[name="myform"] select').click(function () {
if ($(this).val() === 'Isuzu') {
    $('form[name=myform2] select').remove();
    $('form[name=myform2]').append('<select name="choice" onChange="document.location = this.value" value="GO">' + '<option value="http://www.direct4x4.co.uk/catalog/category/view/s/d-max-2012-onwards-canopies-hard-tops-accessories/id/17174/*_blank" >D-Max (2012 Onwards)</option>' + '</select>');
} else if ($(this).val() === 'Nissan') {
    $('form[name=myform2] select').remove();
    $('form[name=myform2]').append('<select name="choice" onChange="window.location.href=this.value">' + '<option value="http://www.direct4x4.co.uk/nissan-navara-d40-2006-onwards-canopies-hard-tops-accessories*_blank" >Navara D40 (2006 Onwards)</option>' + '</select>');
} else if ($(this).val() === 'Ford') {
    $('form[name=myform2] select').remove();
    $('form[name=myform2]').append('<select name="choice" onChange="window.location.href=this.value">' + '<option value="http://www.direct4x4.co.uk/catalog/category/view/s/ranger-t6-2012-canopies-hard-tops-onwards/id/17175/*_blank" >Ranger (T6) (2012 Onwards)</option>' + '</select>');
} else if ($(this).val() === 'Mitsubishi') {
    $('form[name=myform2] select').remove();
    $('form[name=myform2]').append('<select name="choice" onChange="jump(this.myform2)">' + '<option value="http://www.direct4x4.co.uk/catalog/category/view/s/mitsubishi-l200-2005-onwards-canopies-hard-tops-accessories/id/17178/*_blank" >L200 (2005 Onwards)</option>' + '</select>');
} else if ($(this).val() === 'Toyota') {
    $('form[name=myform2] select').remove();
    $('form[name=myform2]').append('<select name="choice" onChange="jump(this.myform2)">' + '<option value="http://www.direct4x4.co.uk/catalog/category/view/s/toyota-hilux-2005-onwards-accessories-canopies-hard-tops/id/17183/*_blank" >Hilux (2005 To 2012)</option>' + '<option value="http://www.direct4x4.co.uk/catalog/category/view/s/hilux-2012-onwards-canopies-hardtops-accessories/id/17177/*_blank" >Hilux (2012 Onwards)</option>' + '</select>');
} else if ($(this).val() === 'VW') {
    $('form[name=myform2] select').remove();
    $('form[name=myform2]').append('<select name="choice" onChange="jump(this.myform2)">' + '<option value="http://www.direct4x4.co.uk/catalog/category/view/s/volkswagen-amarok-canopies-hard-tops-accessories/id/17179/*_blank" >Amarok</option>' + '</select>');
}

});

已编辑希望对之前的抱歉有所帮助。

Answer 1

好了：

fiddle

HTML

<div class="box">
<p>
    <form name="myform" class="myform" id="myForm">
        <select name="brand" id="select">
            <option value="">CHOOSE YOUR VEHICLE</option>
            <option value="isuzu">Isuzu</option>
            <option value="ford">Ford</option>
            <option value="nissan">Nissan</option>
            <option value="mitsubishi">Mitsubishi</option>
            <option value="toyota">Toyota</option>
            <option value="vw">VW</option>
        </select>
        <button type="submit" id="submit">Search</button>
    </form>
</p>
</div>

JS:

(function($) {

//your model
var urls = {
    isuzu: "https://www.direct4x4.co.uk/catalog/category/view/s/d-max-2012-onwards-canopies-hard-tops-accessories/id/17174/*_blank",
    ford: "https://www.direct4x4.co.uk/catalog/category/view/s/ranger-t6-2012-canopies-hard-tops-onwards/id/17175/*_blank",
    nissan: "",
    mitsubishi: "",
    toyota: "",
    vw: "",
}

//updating the currentUrl
var currentUrl = "";

$("#select").on("change", function(e) {
    var val = $("#select").find('option:selected').attr("value");
    currentUrl = urls[val];
});

$("#myForm").on("submit", function(e) {
    e.preventDefault();
    console.log(currentUrl);
    window.open(currentUrl);

});

}(jQuery));

说明

我主要做的是存储 url 的地图并更新用户 select 的当前 url。

一旦触发提交事件（点击搜索），我就会停止其默认行为并重定向到最后更新的 url（来自 select 'change' 事件'）

只需更新地图中其余的 url，它应该可以完美运行。而且，这样更容易维护。

麦克。

提交第二个下拉框 url javascript

submitting the second drop box url javascript

javascript

jquery

forms

jsfiddle

HTML

JS:

说明