Javascript 基于数组设置选项val

我正在尝试建立一个使用多个下拉列表的搜索。搜索脚本使用第一个下拉列表和第二个下拉列表的值。它适用于Acura和MDX，但如果选择RLX，它仍会将MDX作为值传递给搜索

我知道我已经以某种方式将附加选项的值设置为在第二个下拉列表中选择的任何数组，但是我没有运气。我是javascript新手，所以据我所知，可能有一种方法比这更容易实现我的目标

提交表格

以基URL开头的URL的脚本

用于下拉列表的脚本

---

设置本身很好。但是，您有一个输入错误：

sf.item.options[sf.brands.selectedIndex]

应该是：

sf.item.options[sf.item.selectedIndex]

或者，如果您喜欢更美观的jQuery：

function dosearch() {
    var baseUrl = 'http://www.spitzer.com/new-inventory/index.htm?';
    var brand = $('#brands').find(":selected").text();
    var item = $('#item').find(":selected").text();
    location.href = baseUrl + 'make=' + brand + '&&&&' + 'model=' + item + '&&&&';
    return false;
}

哇哇

请阅读一些js的代码样式。如果它起作用，并不意味着它是好的

永远不要使用eval！邪恶 你忘了var声明。 html中的内联处理程序也是错误的做法。

---

谢谢你的答复。我在其他堆栈溢出问题中找到了大部分脚本，并慢慢地将它们一点一点地拼凑起来，以完成我到目前为止的工作。但我会注意到使用什么术语！我不知道为什么每个人都讨厌eval。你知道，这并不总是坏事。在阅读了两个代码示例后，这一个确实更清晰易读，+1Banana，我同意在某些情况下，eval是必要的，比如旧浏览器中的模板或json编码。但它总是在窗口范围内运行，例如，在这种情况下，从全局范围求值变量只是为了获得指向它的链接。您可以在空变量上获得错误，唯一捕获它的方法是try{}exept。这是非常缓慢和大的构造，只是为了得到一个select的值。所以我确认我理解你的代码在做什么。我的JS工作得很好，但是您正在切换搜索脚本以从下拉列表中提取值，而不是使用数组来设置值？这是一种更简单的方法。事实上，您也在使用sf.item.options[sf.item.selectedIndex]从下拉列表中提取值。但是，jQuery方法的使用和读取都更干净。明白了！非常感谢你！我非常感谢你的帮助！

sf.item.options[sf.brands.selectedIndex]

sf.item.options[sf.item.selectedIndex]

function dosearch() {
    var baseUrl = 'http://www.spitzer.com/new-inventory/index.htm?';
    var brand = $('#brands').find(":selected").text();
    var item = $('#item').find(":selected").text();
    location.href = baseUrl + 'make=' + brand + '&&&&' + 'model=' + item + '&&&&';
    return false;
}

$(function (){
    // Selector
    var $form = $("#searchform");

    // it could be hashchange in the future
    var setPath = function (url) {
        window.location = url;
    };

    var searchHandler = function (e) {
        e.preventDefault();
        // You can serialize whole form just by .serialize
        var url = window.location.pathname + "?" + $form.serialize();
        setPath(url);
    };

    // Handlers, set handlers in js not in DOM, inline delegation is really nasty
    // alias for .submit
    $form.on("submit", searchHandler);


    // Form elements
    var $brands = $('#brands'),
        $item = $("#item");

    // Items list, dont use new Array or String. It`s good way in  
    var items = {
        "Acura": ["MDX","RLX","ILX","TLX"],
        "Chrysler": ['200','3000','Town&Country']
    };

    // eval is EVIL !!!! don`t use it ever
    var populateItems = function () {
        var elements = "",
            value = $brands.val();

        if (items[value] != null) {
            $.each(items[value], function (i, item) {
                elements += "<option value=\"" + item + "\">" + item + "</option>";
            });
        }

        $item.html(elements);
    }

    // Alias .change
    $brands.on("change", populateItems);     

    // init for start
    populateItems();
});

<form name="searchform" id="searchform">
    Brand:
    <select id="brands" name="make">
        <option value="Acura">Acura</option>
        <option value="Chrysler">Chrysler</option>
    </select>

    <select id="item" name="model">

    </select>

    <input type="submit" value="Submit"/>
</form>