选择按名称或ID，而不是

问题描述：

类

动态的AJAX下拉我有一个动态的Ajax下拉，取决于在前面的下拉列表中选择的值的变化值。我目前有它的工作，但由于某种原因，它只适用于我使用下拉类名称。当试图使用名称或id属性时，它停止工作。选择按名称或ID，而不是

我一直在使用#category获得由ID名称值尝试。

的Javascript

$(document).ready(function() { 
    $(".category").change(function() { 
     var id=$(this).val(); 
     var dataString = 'id='+ id; 

     $.ajax 
     ({ 
      type: "POST", 
      url: "makes.php", 
      data: dataString, 
      cache: false, 
      success: function(html) { 
       $(".makes").html(html); 
      } 
     }); 
    }); 

    $(".makes").change(function() { 
     var id=$(this).val(); 
     var dataString = 'id='+ id; 

     $.ajax 
     ({ 
      type: "POST", 
      url: "models.php", 
      data: dataString, 
      cache: false, 
      success: function(html) { 
       $(".models").html(html); 
      } 
     }); 
    }); 
});

下拉HTML

<div class="col-lg-2 col-md-2 col-sm-3 col-xs-12"> 
    <div class="select-dropdown"> 
    <select class="category" name="category" id="category"> 
     <option value="">All Vehicle Types</option> 
     <option value="Cars">Cars</option> 
     <option value="SUVs">SUVs</option> 
     <option value="Trucks">Trucks</option> 
     <option value="Motorcycles">Motorcycles</option> 
    </select> 
    </div> 
</div> 
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-12"> 
    <div class="select-dropdown"> 
    <select class="makes" name="makes" id="makes"> 
     <option value="" selected="selected">Any Make</option> 
    </select> 
    </div> 
</div> 
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-12"> 
    <div class="select-dropdown"> 
    <select class="models" name="models"> 
     <option value="" selected="selected">Any Model</option> 
    </select> 
    </div> 
</div>

它工作正常 –

答

检查这个代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
$("#category").change(function() { 
    var id=$(this).val(); 
    alert(id) 
    var dataString = 'id='+ id; 

    $.ajax 
    ({ 
     type: "POST", 
     url: "makes.php", 
     data: dataString, 
     cache: false, 
     success: function(html) { 
      $("#makes").html(html); 
     } 
    }); 
}); 

$("#makes").change(function() { 
    var id=$(this).val(); 
    alert(id) 
    var dataString = 'id='+ id; 

    $.ajax 
    ({ 
     type: "POST", 
     url: "models.php", 
     data: dataString, 
     cache: false, 
     success: function(html) { 
      $("#models").html(html); 
     } 
    }); 
    }); 
}); 
</script> 

<div class="col-lg-2 col-md-2 col-sm-3 col-xs-12"> 
<div class="select-dropdown"> 
<select class="category" name="category" id="category"> 
    <option value="">All Vehicle Types</option> 
    <option value="Cars">Cars</option> 
    <option value="SUVs">SUVs</option> 
    <option value="Trucks">Trucks</option> 
    <option value="Motorcycles">Motorcycles</option> 
</select> 
</div> 
</div> 
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-12"> 
<div class="select-dropdown"> 
<select class="makes" name="makes" id="makes"> 
    <option value="1" selected="selected">Any Make</option> 
    <option value="2" selected="selected">Any Make1</option> 
</select> 
    </div> 
    </div> 
    <div class="col-lg-2 col-md-2 col-sm-3 col-xs-12"> 
    <div class="select-dropdown"> 
    <select class="models" name="models" id="models"> 
    <option value="1" selected="selected">Any Model</option> 
    <option value="2" selected="selected">Any Model1</option> 
    </select> 
    </div> 
    </div>

你也可以使用的onchange功能

<script language="javascript" src="jquery-2.2.0.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 

function test1(id_value){ 
    var id=id_value.value; 
    alert(id) 
    var dataString = 'id='+ id; 

    $.ajax 
    ({ 
     type: "POST", 
     url: "makes.php", 
     data: dataString, 
     cache: false, 
     success: function(html) { 
      $("#makes").html(html); 
     } 
    }); 
} 

function test2(id_value){ 
    var id=id_value.value; 
    alert(id) 
    var dataString = 'id='+ id; 

    $.ajax 
    ({ 
     type: "POST", 
     url: "models.php", 
     data: dataString, 
     cache: false, 
     success: function(html) { 
      $("#models").html(html); 
     } 
    }); 
} 

</script> 

<div class="col-lg-2 col-md-2 col-sm-3 col-xs-12"> 
<div class="select-dropdown"> 
<select class="category" name="category" id="category" onchange="test1(this)"> 
    <option value="">All Vehicle Types</option> 
    <option value="Cars">Cars</option> 
    <option value="SUVs">SUVs</option> 
    <option value="Trucks">Trucks</option> 
    <option value="Motorcycles">Motorcycles</option> 
</select> 
</div> 
</div> 
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-12"> 
<div class="select-dropdown"> 
<select class="makes" name="makes" id="makes" onchange="test2(this)"> 
    <option value="1" selected="selected">Any Make</option> 
    <option value="2" selected="selected">Any Make1</option> 
</select> 
</div> 
</div> 
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-12"> 
<div class="select-dropdown"> 
<select class="models" name="models" id="models"> 
    <option value="1" selected="selected">Any Model</option> 
    <option value="2" selected="selected">Any Model1</option> 
</select> 
</div> 
</div>

检查此代码 –

没有工作。由于某种原因，当我切换到从类名选择id名称时，它停止工作。页面上没有其他id名称具有相同的名称。 –

哎有人检查，检查我的代码 –

答

你的代码看起来不错，万一你没有其他元素与类别代码的其余部分作为它的ID或名称？这可能是导致问题的原因。

答

在动态内容，你必须使用

$(documemt).on('event name','selector',function(){ });

你的代码是像下面

$(document).ready(function() { 
$(document).on('change',"#category",function() { 
    var id=$(this).val(); 
    var dataString = 'id='+ id; 

    $.ajax 
    ({ 
     type: "POST", 
     url: "makes.php", 
     data: dataString, 
     cache: false, 
     success: function(html) { 
      $(".makes").html(html); 
     } 
    }); 
});

没有工作。不知道它是什么。只有在我选择课程名称时才有效。 –

选择按名称或ID，而不是

相关推荐