Question

我有一个动态Ajax下拉列表，它根据前一个下拉列表中选择的值更改值。我目前有它工作，但由于某种原因它只有在我使用下拉类名称时才有效。尝试使用name或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>

Answer 1

您的代码看起来很好，您的代码的其余部分中是否有其他元素，其类别为其ID或名称？这可能是造成这个问题的原因。

Answer 2

检查此代码

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

Answer 3

在动态内容中，您必须使用

KP9!<<*!r!*?(s8W-!s8E'!p](9o!8mhW!!

您的代码如下所示

!!"tY!!!Q0p](9o&)[Ef!<3$!!!"tY!!#7

按名称或ID而不是类选择动态ajax下拉列表

3 个答案: