選擇按名稱或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>

來源

2017-03-09 John Mad

它工作正常 –

檢查這個代碼

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

來源

2017-03-09 17:02:58

檢查此代碼 –

沒有工作。由於某種原因，當我切換到從類名選擇id名稱時，它停止工作。頁面上沒有其他id名稱具有相同的名稱。 –

哎有人檢查，檢查我的代碼 –

你的代碼看起來不錯，萬一你沒有其他元素與類別代碼的其餘部分作爲它的ID或名稱？這可能是導致問題的原因。

來源

2017-03-09 16:59:52 Cragsterboy

在動態內容，你必須使用

$(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); 
     } 
    }); 
});

來源

2017-03-09 17:16:34

沒有工作。不知道它是什麼。只有在我選擇課程名稱時纔有效。 –

選擇按名稱或ID，而不是

回答

相關問題