[英]dynamic select tag in html using javascript, php and json
我想在html中創建動態選擇選項。
我的html看起來像
<form id="example-1" name="redirect">
<select id="stateID" name="stateID">
<option value=""> By Collateral Type </option>
<option value="SC">Stories </option>
<option value="TL">Thought </option>
<option value="MI">Insights </option>
/select>
<select id="countyID" name="countyID" onchange="aq()">
<option value="">By Area of Interest </option>
/select>
<select id="townID" name="townID">
<option value="">By Sub-Categoris </option>
...
我希望根據第一和第二選擇框更改第二和第三選擇框。
抱歉,如果這是一個重復的問題,但我已經看過了
使用jQuery / Json將值加載到HTML選擇中
如何在PHP中使用Ajax響應文本動態地在select標簽內創建選項? 仍然不知道該怎么做。
我的aq()是:
function aq()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var selectList = document.getElementById('townID');
alert("inside onreadystaechange");
var jsonData = JSON.parse(val);
alert(jsonData);
for (var i in jsonData)
{
var option = document.createElement('option');
option.value = jsonData[i];
option.text = jsonData[i];
selectList.appendChild(option);
alert(option);
}
}
}
xmlhttp.open("GET","datasupplier.php",true);
xmlhttp.send();
}
而我的datasupplier.php是:
$stateID = $_GET['stateID'];
$countyID = $_GET['countyID'];
$townID = $_GET['townID'];
$html = $_GET['html'];
$states = array();
$states['SC'] = "Stories";
$states['TL'] = "Leadership";
$states['MI'] = "Insights";
$counties = array();
$counties['SC']['PRACT'] = 'By Practical purposes';
$counties['SC']['SERV'] = 'By Service Area';
$counties['TL']['PRACT'] = 'By Practical purposes';
$counties['TL']['SERV'] = 'By Service Area';
$counties['MI']['PRACT'] = 'By Practical purposes';
$counties['MI']['SERV'] = 'By Service Area';
$towns = array();
$towns['SC']['PRACT']['/index.php?q=sc%3Fpract%3Faut'] = "Automotive";
$towns['SC']['PRACT']['/index.php?q=sc%3Fpract%3Fedu'] = "Education";
$towns['TL']['PRACT']['/index.php?q=tl%3Fpract%3Faut'] = "Automotive";
$towns['TL']['PRACT']['/index.php?q=tl%3Fpract%3Fedu'] = "Education";
$towns['MI']['PRACT']['/index.php?q=mi%3Fpract%3Faut'] = "Automotive";
$towns['MI']['PRACT']['/index.php?q=mi%3Fpract%3Ffam'] = "Business";
$villages = array();
$villages['SC']['PRACT']['HEA']['/index.php?q=node/124'] = 'Apollo Hospitals';
$villages['SC']['PRACT']['PRI']['/index.php?q=node/130'] = 'Fund Raising in Rwanda';
$villages['TL']['PRACT']['AUT']['/index.php?q=node/78'] = 'India-Mecca of Small Car Design';
$villages['TL']['PRACT']['AUT']['/index.php?q=node/141'] = 'Bullish on Automotive Sector';
$villages['MI']['PRACT']['EDU']['/index.php?q=node/116'] = 'Education - TL';
$villages['MI']['PRACT']['HEA']['/index.php?q=node/59'] = 'Indian AWC Market';
if($stateID && !$countyID && !$townID)
{
echo json_encode( $counties[$stateID] );
}
elseif( $stateID && $countyID && !$townID )
{
echo json_encode( $towns[$stateID][$countyID] );
}
elseif( isset($villages[$stateID][$countyID][$townID]) )
{
echo json_encode( $villages[$stateID][$countyID][$townID] );
}
else
{
echo '{}';
}
我不知道如何將由datasupplier.php回顯的JSON插入aq()函數。 JSON.parse(val)中使用的變量“ val”的值應該是什么?
我在aq()
函數中添加了以下內容
var val = xmlhttp.responseText;
var county = document.getElementById("countyID").value;
var town = document.getElementById("townID").value;
var state = document.getElementById("stateID").value;
並在我的aq()
函數中編輯了以下內容
option.value = i;
var url = "http://localhost/consulting/sites/all/themes/danland/datasupplier.php?stateID=" + state + "&countyID=" + county + "&townID=" + town;
xmlhttp.open("GET",url,true);
而且效果很好!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.