选择值在jQuery Mobile中未定义

Question

我有4个依赖项选择选项，我可以使用jQuery获取第一个<select>值，剩下的3个选项返回undefined，我尝试了很多方法来使用jQuery从父标签到标签本身获取值没有运气，这是我的代码： - jQuery的： -

    <script type="text/javascript">
  $(document).ready(function(){
    $.get('URL',function(data){
      data = $.parseJSON(data);
      console.log(data);
      jQuery.each(data, function(k, v) {
        $('#hospitalID')
            .append($("<option id='optionData"+v.id+"'></option>")
            .attr("value",v.id)
            .text(v.name));
      });
    });
  });

  $(document).ready(function(){
    //$('#depID option[value!="0"]').remove();
    $('#hospitalID').change(function(){
        var hospitalID = $("option:selected:last",'#hospitalID').val();
        hospitalID = encodeURIComponent(hospitalID);
        jQuery.get(URL"+hospitalID,function(data){
        data = jQuery.parseJSON(data);
        $('#depID').find('option[value!="0"]').remove();
        console.log(data);

            $.each(data,function(key,value){
                //if($('#optionData'+value.departmentID).length == 0){
                console.log(value.departmentID);
                    $('#depID')
                        .append($("<option id='optionData"+value.departmentID+"'></option>")
                        .attr("value",value.departmentID)
                        .text(value.name));
                        //}
                    });
              });
        });
    });

  $(document).ready(function(){
    //$('#depID option[value!="0"]').remove();
    $('#depID').change(function(){
        var hospitalID = $("option:selected:last",'#hospitalID').val();
        var depID = $("option:selected:last",'#depID').val();
        hospitalID = encodeURIComponent(hospitalID);
        console.log(depID);
        jQuery.get("URL"+hospitalID+"/"+depID,function(data){
        data = jQuery.parseJSON(data);
        $('#drID').find('option[value!="0"]').remove();
        console.log(data);

            $.each(data,function(key,value){
                //if($('#optionData'+value.departmentID).length == 0){
                console.log(value.doctorID);
                    $('#drID')
                        .append($("<option id='optionData"+value.doctorID+"'></option>")
                        .attr("value",value.doctorID)
                        .text(value.drName));
                        //}
                    });
              });
        });
    });

  $(document).ready(function(){
    //$('#depID option[value!="0"]').remove();
    $('#drID').change(function(){
        var drID = $("option:selected:last",'#drID').val();
        drID = encodeURIComponent(drID);
        console.log(drID);
        jQuery.get("/URL/"+drID,function(data){
        data = jQuery.parseJSON(data);
        $('#drAppID').find('option[value!="0"]').remove();
        console.log(data);

            $.each(data,function(key,value){
                //if($('#optionData'+value.departmentID).length == 0){
                console.log(value.doctorID);
                    $('#drAppID')
                        .append($("<option id='optionData"+value.id+"'></option>")
                        .attr("value",value.id)
                        .text(value.dates));
                        //}
                    });
              });
        });
    });
</script>

HTML： -

   <div data-role="page" class="mobileBody">
  <?php require 'user_header.php' ?>
  <div data-role="main" class="absolute-center">
      <label for="hospitals">Hospital</label>
      <select id="hospitalID" data-native-menu="true">
        <option value="0"></option>
      </select>

      <label for="depID">Departments</label>
      <select id="depID">
        <option value="0"></option>
      </select>

      <label for="drID">Doctors</label>
      <select id="drID">
        <option value="0"></option>
      </select>

      <label for="drAppID">Doctor Appointments</label>
      <select id="drAppID">
        <option value="0"></option>
      </select>
  </div>
</div>