javascript - 根据数组设置选项值

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!评估=邪恶
• 你忘记了 var 声明。
• HTML 中的内联处理程序也是不好的做法。
• forEach 将在 IE <= 8 中中断
• 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>