根据数组设置选项值

Question

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

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

提交表格

            <form name="searchform" onSubmit="return dosearch();">
        Brand:
            <select id="brands">
                <option val="Acura">Acura</option>
                <option val="Chrysler">Chrysler</option>
            </select>

            <select id="item">

            </select>

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

以基本 URL 开头的 URL 脚本

<script type="text/javascript">
function dosearch() {
    var sf=document.searchform;
    var baseUrl = 'http://www.spitzer.com/new-inventory/index.htm?';
    location.href = baseUrl.concat('make='+ sf.brands.options[sf.brands.selectedIndex].value + '&&&&' + 'model=' + sf.item.options[sf.brands.selectedIndex].value + '&&&&' );
return false;
}

下拉脚本

// JavaScript Document

$(document).ready(function(){
Acura=new Array("MDX","RLX","ILX","TLX");
Chrysler=new Array('200','3000','Town&Country');

populateSelect();

$(function() {

  $('#brands').change(function(){
    populateSelect();
});

});


function populateSelect(){
cat=$('#brands').val();
$('#item').html('');

   eval(cat).forEach(function(t) { 
        $('#item').append('<option val="">'+t+'</option>');
    });
}



});

Answer 1

哇哇！

请阅读一些 js 的代码风格。如果它有效，并不意味着它是好的。

• 永远不要使用 eval！ eval = 邪恶
• 您忘记了 var 声明。
• html 中的内联处理程序也是不好的做法。
• forEach 会在 IE 中中断
• concat 很好，plus 也很好

...很多错误，这会让你付出代价。

我给你写了一个单行，但它没有结构。只是一些想法，删除了很多东西。

http://jsfiddle.net/gwEP5/

整个js代码：

$(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();
});

HTML 格式：

<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>

Answer 2

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

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;
}