javascript - 带有 ajax 奇怪行为的链接下拉菜单

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)">

通过这种方式，您的函数不会获取对选择元素的引用

为了清空选择，我建议使用 .empty()而不是 .html('')

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>');
            })
        },

    });
}

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