使用jQuery和xml基于另一个选择列表中的索引填充选择列表

时间:2012-02-13 15:42:23

标签: javascript jquery xml

我一直在努力解决我整个下午一直遇到的问题,并希望有人能够帮助我发现我的错误。我今天早上才开始学习jQuery并试图获得此功能工作,但它证明了众所周知的痛苦......

我正在尝试根据make select list

中的值填充模型选择列表

我的jQuery函数如下所示:

$(document).ready(function()
{
    $('#make').change(function(){
      alert('Changing');
      $('#model option').remove();
      $('#model').attr('disabled',true);             
      $.ajax(
      {
          type: "GET",
          url: "../xmlsource/models/model-"+$('#make option:selected').val()+".xml",
          dataType: "xml",
          success: function(xml) 
          {
              alert('XML');
              $(xml).find('model').each(function()
              {
                  var name = $(this).attr('name');
                  var value = $(this).attr('value');
                  $('#model').append("<option value='"+value+"'>"+name+"</option");
                  alert('Cycling');
              });
          }
      });                 
      $('#model').removeAttr('disabled');   
    });
});

我的测试xml文件如下所示:

<?xml version="1.0" encoding="utf-8" ?>
<models>
<model name="--Please Select--" value="0">
<model name="A1" value="1">
<model name="A2" value="2">
</models>

我的HTML看起来像这样:

<form method="post" action="seller.php">
<table border="0">
    <tr>
        <td>Make</td>
        <td>
            <select name='make' id="make">
            <?php 
                $manufacturers = simplexml_load_file('../xmlsource/makes.xml');
                foreach($manufacturers->xpath('//manufacturer') as $manufacturer)
                {
                    if(isset($trimmed['make']))
                    {
                        if ($trimmed['make'] == "$manufacturer->value")
                        {
                        ?>
                        <option value="<?php echo "$manufacturer->value";?>" selected="selected"><?php echo "$manufacturer->name"?></option>
                        <?php
                        }
                        else
                        {           
                        ?>
                        <option value="<?php echo "$manufacturer->value";?>"><?php echo "$manufacturer->name"?></option>
                        <?php
                        }
                    }
                    else
                    {
                    ?>
                    <option value="<?php echo "$manufacturer->value";?>"><?php echo "$manufacturer->name"?></option>
                    <?php
                    }
                }
            ?>      
            </select>
        </td>
    </tr>
    <tr>
        <td>Model</td>
        <td>
            <select name="model" id="model">                                
            </select>
        </td>
    </tr>
</table>
<div align="center"><input id="button" type="submit" value="Create My Listing"></div>

我已经尽可能地测试了该函数并且它正在成功加载xml文件,但只是点击了第一个警报,它似乎没有输入成功的条件代码。我很抱歉,如果这看起来很幼稚,但是正如我所说,我对此事的经验不多

非常感谢任何帮助

亲切的问候 赫比

1 个答案:

答案 0 :(得分:0)

我能够在 jsFiddle 中使用它(请注意,url和数据参数特定于jsFiddle - 使用您自己的URL并删除数据节点)。

这是我使用的jQuery:

$('#make').change(function() {
    $('#model option').remove();
    $('#model').attr('disabled', true);
    $.ajax({
        type: "POST",
        url: "/echo/xml/",
        data:{
            xml:'<?xml version="1.0" encoding="utf-8" ?><models><model name="--Please Select--" value="0" /><model name="A1" value="1" /><model name="A2" value="2" /></models>'},
        dataType: "xml",
        success: function(xml) {
            $(xml).find('model').each(function() {
                var name = $(this).attr('name');
                var value = $(this).attr('value');
                $('#model').append("<option value='" + value + "'>" + name + "</option");
            });
                $('#model').removeAttr('disabled');
        }
    });
});

请注意,我使用的是POST而不是GET。我还必须自己关闭所有XML模型节点。