Question

我有一个奇怪的问题，下面是两个简单的get调用并从另一个文件返回HTML。我收到的HTML上有3个combox和事件，选择一个combox填充其他。一切都很好。

如果我将接收HTML添加到我拥有的DIV中。但是，如果我调用该文件两次并将其添加到两个div。如果我在第一组上选择一个组合框，即使第二组也在改变。无论第一组3个盒子上的事件是否也在第二组上自动发生，反之亦然。但我希望这两套是独立的。

jQuery的：

        $.get("cars.php",{Make:'GM', Model:'Chevy', Year:'2009'},
               function(percar){
                $("#perPlace").append(percar);
            });

        $.get("cars.php",{Make:'Honda', Model:'Civic', Year:'2008'},
               function(curcar){
                $("#curPlace").append(curcar);
            });

HTML：

<div id="perPlace" >
</div>

<div id="curPlace">
</div>

返回HTML（减少CSS和值以简化）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <title>Select test</title>
            <script type="text/javascript" src="../jquery-1.5.1.min.js"></script>
            <script type="text/javascript" charset="utf-8">
            $(function(){
              $("select#make").change(function(){
                var makeVar = $(this).val();
                var jqxhr =$.getJSON("select.php",{make: makeVar, ajax: 'true'}, function(j){
                  var options = '';
                  for (var i = 0; i < j.length; i++) {
                    options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
                    if( i==0){
                     populateYear(j[i].optionValue );
                    }

                  }
                  $("select#model").html(options);
                }).error(function(xhr, ajaxOptions, thrownError) {  alert(xhr.statusText); })
              })



              $("select#model").change(function(){
                 populateYear($(this).val());
              })
            })



           function  populateYear(modelID){
                $.getJSON("select.php",{model: modelID, ajax: 'true'}, function(j){
                               var options = '';
                               for (var i = 0; i < j.length; i++) {
                                 options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
                               }
                               $("select#year").html(options);
                             })

            }


    </head>



    <div class="field_container">
        <select id="make">

            <option value="1">GM</option>
            <option value="2">HONDA</option>
            <option value="3">FORD</option>
        </select>
        <select id="Model">
            <option value="1">Chevy</option>
            <option value="2">Pontiac</option>
        </select>

        <select id="Year">
            <option value="1">2000</option>
            <option value="2">2001</option>
            <option value="3">2002</option>
        </select>
          </div>

Answer 1

您是否尝试制作“级联下拉菜单”？如果您打算连接数据库，并根据“年份”选择显示所有“品牌”，然后根据之前的所有“模型”，请进行一些谷歌搜索。年“和”做出选择...我有几个不同的版本，但最终得出了一个非常复杂的汽车选择系统...在http://pulsedrivers.com看到它只是搜索级联下拉列表和你会发现很多很好的例子。

Answer 2

我们遇到了同样的问题，这就是我们解决问题的方法。

我们在控件前面添加了请求（例如GetCar(Honda)会将控件作为Honda_Make，Honda_Model，Honda_Year加上前缀。这使我们能够在需要该视图时获得唯一的控件（我们使用MVC）。我们处理事件的方式是将控件传递给函数（例如PopulateYear(YearDropdown);，我们称之为函数的方式是PopulateYear($("#Honda_Year")）;

Jquery两组3个comboxbox - 一组听另一组

2 个答案: