Question

我想在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>

...

我希望第二个和第三个选择框根据第一个和第二个选择框进行更改。

很抱歉，如果这是一个重复的问题，但我已经查看了

Loading values into an HTML select using jQuery/Json
How to create option inside select tag dynamically with ajax response text in php? 并且仍然无法理解如何做到这一点。

我的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”的值应该是多少？

Answer 1

感谢sanketh

我在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);

并且效果非常好！

使用javascript，php和json在html中动态选择标记

1 个答案: