第二个选择框从jquery中的第一个选择框填充

我想从第一个选择框的值填充第二个选择框名称’ctype’。 但问题，仍然没有显示我附加的价值…我不知道如何..现在已经2周我试图解决..但仍然没有显示在第二个选择框..

cash.php

在第一个选择框上

  --Choose One--  <option value="" >   

第二个选择框

 
  --Choose One--   

jQuery的

  $("#merchant").selectbox({ onChange:function(val,inst){ $.ajax({ type:"GET", data:{merchant:val}, url:"getctype.php", success:function(data){ $("#ctype").html(data); $("#ctype_id").selectbox(); } }); }, });  

脚本getctype.php

这是我遵循的示例…第一个选择框中的值填充到第二个选择框… http://www.bulgaria-web-developers.com/projects/javascript/selectbox/index.php

Answer 1

首先，你getctype.php询问数据库并只返回一张卡。 可能是您应该迭代结果以返回多个值。 此外，建议返回JSON数据（可以通过Javascript轻松管理）。 你可以用一段代码来完成这项工作

PHP脚本返回的数据将是JSON响应，如：

 ["card1","card2","card3",....] 

其次，当我们查看你的AJAX调用时，success函数正在用id ctype替换HTMLElement

 $("#ctype").html(data); 

具有id ctype的HTMLElement是

，因此

的内容完全取代了原始内容（卡片值），而不是a。 然后，你的第二行代码：

 $("#ctype_id").selectbox(); 

不会有任何影响因为它不再存在（取而代之的是AJAX调用的内容返回）。

为了使它工作，你可以在JS中使用这个secon代码段：

 // Assume the second select is already a **selectbox** // Make the first select a selectbox $("#merchant").selectbox({ onChange:function(val,inst){ // Run the ajax call to refresh the content of the second selectbox $.ajax({ type: "GET", data: { merchant: val }, url:"getctype.php", dataType: 'json', success: function(data) { // Remove previous content of your second selectbox $("#ctype_id").empty(); // Append default option $("#ctype_id").append($('-- Chose one --')); // Loop on your data (which is an array) for(var i = 0 ; i < data.length ; i++) { $("#ctype_id").append($(document.createElement("option")) .val(data[i]) .html(data[i])); } } }); } }); 

Answer 2

如果你使用jquery，我应该做以下事情：

  $("#merchant").on('change', function() { $('#ctype_id').empty(); $.get('getctype.php', function(data) { $(data).appendTo('#ctype_id'); }); }); 

你的PHP代码将是这样的：

 echo '--Choose One--' $sql = mysql_query("select card from card_support where merchant_id = '$target'"); $getmerchant = mysql_fetch_assoc($sql); $card = $getmerchant['card']; echo ''.$card.'';