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>

使用基本网址启动网址的脚本

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

DROP DOWNS SCRIPT

// 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 = evil
你忘记了var声明。
html错误练习中的内联处理程序。
forEach将在IE＆lt; = 8
concat很好，加上也很好

......很多错误，这将花费你的时间。

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

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

根据数组设置选项值

2 个答案: