Question

我有以下下拉菜单控件。我正在将它们链接在一起所以当一个被修改时，下一个将有条件地更新：

<select name="building" id="building" onchange="getunit()">
  <option id="-1">Select building</option>
</select>
<select name="unit" id="unit" onchange="getlease()">
  <option id="-1">Select unit</option>
</select>
<select name="lease" id="lease" onchange="getleaseterm()">
  <option id="-1">Select lease</option>
</select>
   <select name="leaseterm" id="leaseterm">
  <option id="-1">Select lease term</option>
</select>

对于第一个 - 我填充所有内容而不过滤

   $select = $('#building');
    //request the JSON data and parse into the select element
    $.ajax({
      url: '/api/get_building/',
      dataType:'JSON',
      success:function(data){
        //clear the current content of the select
        //iterate over the data and append a select option

        $.each(data, function(key, val){
          $select.append('<option value="' + val.id + '">' + val.name + '</option>');
        })
      },
    });

其他3他们从第一个彼此依赖

function getunit() {

    //get a reference to the select element
    $select = $('#unit');
    $lease = $('#lease');
    $leaseterm = $('#leaseterm');
    //request the JSON data and parse into the select element

    var c_id = ($("select[name='building'] option:selected").attr('value'));
    c_url = "/api/get_unit/"+c_id+"/";

    $.ajax({

      url: c_url,
      dataType:'JSON',
      success:function(data1){
        //clear the current content of the select
        $select.html('');

        $.each(data1, function(key, val){
          $select.append('<option value="' + val.id + '">' + val.number + '</option>');
        })
        getlease();
      },

    });

}

function getlease() {

    //get a reference to the select element
    $select = $('#lease');
    $leaseterm = $('#leaseterm');
    //request the JSON data and parse into the select element
    var s_id = ($("select[name='unit'] option:selected").attr('value'));
    s_url = "/api/get_lease/"+s_id+"/";

    $.ajax({
      url: s_url,
      dataType:'JSON',
      success:function(data1){
        //clear the current content of the select
        $select.html('');
        //iterate over the data and append a select option

        $.each(data1, function(key, val){
          $select.append('<option value="' + val.id + '">' + val.id + '</option>');
        })
      },

    });

}



function getleaseterm() {

    //get a reference to the select element
    $select = $('#leaseterm');
    //request the JSON data and parse into the select element
    var l_id = ($("select[name='lease'] option:selected").attr('value'));
    l_url = "/api/get_leaseterm/"+l_id+"/";

    $.ajax({
      url: l_url,
      dataType:'JSON',
      success:function(data1){
        //clear the current content of the select
        $select.html('');
        //iterate over the data and append a select option

        $.each(data1, function(key, val){
          $select.append('<option value="' + val.id + '">' + val.id + '</option>');
        })
      },

    });

}

前3个功能像时钟一样工作。我的问题是最后一个函数getleaseterm（）并不总是选择正确的值。我真的没有看到代码中的问题我没有在控制台中出现任何错误。

Answer 1

您的问题在这一行：

var l_id = ($("select[name='lease'] option:selected").attr('value'));

选项没有值属性。在您的情况下，您定义了 val 属性。因此，如果你需要得到这个值，你需要写：

var l_id = ($("select[name='lease'] option:selected").attr('val'));

根据文档，我建议使用标准的value属性。

在这种情况下，您可以使用以下内容获取所选值：

$("select[name='lease']").val();

无论如何，我建议将js代码与html分开。但如果你不能，至少使用以下参数：

this：对当前元素的引用
event：事件对象

所以，你的html看起来像：

<select name="lease" id="lease" onchange="getleaseterm(this, event)">

这样你的函数就不会获得对select元素的引用

为了清空选择我使用.empty()代替 .html（＆＃39;＆＃39;）

＆＃13;

function getleaseterm(ele, e) {
    $select = $(ele);
    var l_id = $(ele).val();
    l_url = "/api/get_leaseterm/"+l_id+"/";

    // for testing....
    l_url = 'https://api.github.com/repositories?since=' + l_id;

    $.ajax({
        url: l_url,
        dataType:'JSON',
        success:function(data1){
            //clear the current content of the select
            $select.empty();
            //iterate over the data and append a select option

            $.each(data1, function(key, val){
                $select.append('<option value="' + val.id + '">' + val.id + '</option>');
            })
        },

    });
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<select name="building" id="building" onchange="getunit(this, event)" disabled>
    <option value="-1">Select building</option>
</select>
<select name="unit" id="unit" onchange="getlease(this, event)"  disabled>
    <option value="-1">Select unit</option>
</select>
<select name="lease" id="lease" onchange="getleaseterm(this, event)">
    <option value="-1">Select lease</option>
    <option value="11">364</option>
</select>
<select name="leaseterm" id="leaseterm"  disabled>
    <option value="-1">Select lease term</option>
</select>

＆＃13;

带有ajax奇怪行为的链式下降

1 个答案: