尝试使用XML填充下拉菜单

时间:2015-07-29 15:29:32

标签: javascript jquery html css xml

我尝试做的是使用XML文件加载下一个下拉菜单项。这样你就可以选择你的汽车的品牌,型号,然后是年份。这是为了向我的网站上的客户展示他们的车辆扬声器尺寸。 这就是我现在所拥有的,但我无法解决这个问题。



MyCommentedPosts




这就是我的XML布局:



<!doctype html public "-//w3c//dtd html 3.2//en">
<html>
<head>
<head>
<script src="jquery-1.11.3.min.js"></script>
</head>
<title>demo of dropdown list using xml element data in JavaScript</title>
<script type="text/javascript">
$(document).ready(function() {
    var course_data; // variable to hold data in once it is loaded
    $.get('http://creativenights.creativecaraudio.net/test/fitguide.xml', function(data) { // get the courses.xml file
        course_data = data; // save the data for future use
                            // so we don't have to call the file again
        var that = $('#courses'); // that = the courses select
        $('MAKE', course_data).each(function() { // find courses in data
            // dynamically create a new option element
            // make its text the value of the "title" attribute in the XML
            // and append it to the courses select
            $('<option>').text($(this).attr('MAKE')).appendTo(that);
        });
    }, 'xml'); // specify what format the request will return - XML

    $('#courses').change(function() { // bind a trigger to when the
                                      // courses select changes
        var val = $(this).val(); // hold the select's new value
        var that = $('#times').empty(); // empty the select of times
                                        // and hold a reference in 'that'
        $('MAKE', course_data).filter(function() { // get all courses...
            return val == $(this).attr('title'); // find the one chosen
        }).find('model').each(function() { // find all the times...
            // create a new option, set its text to the model, append to
            // the times select
            $('<option>').text($(this).text()).appendTo(that);  
        });
    });
});
</script>

<body>

Make:
<select id='courses'>
    <option value='0'>----------</option>
</select>
<br>
Model:
<select id='times'>
</head>


</body>
</html>
&#13;
&#13;
&#13;

我尝试制作的内容与metraonline.com网站底部的内容相似

我现在有一个关于我目前所做的现场演示: http://creativenights.creativecaraudio.net/test/dropdown/xmltest_1.html 任何帮助将不胜感激,我已经尝试了几个星期了。

1 个答案:

答案 0 :(得分:0)

如果您在每次选择后都无法查询数据库,那么您可以利用jQuery contains selector

基本的例子是:

->add('dateEnd', 'entity', array(
                'class' => 'BackBundle:PackagesDatesPrices',
                'property' => 'DateEnd',
                'query_builder' => function(EntityRepository $er) use ($id) {
                    return $er->createQueryBuilder('a')
                        ->innerjoin('a.package', 'c', 'WITH', 'a.package = c.id')
                        ->addSelect('a')
                        ->add('where', 'c.id = :id')
                        ->add('orderBy', 'a.price ASC')
                        ->setParameter('id', $id)
                        ;
                },
            ))

plnkr

中的演示