Question

我有两个选择，一个用于选择组，另一个用于显示子组类别。

<div class="frmDronpDown">
    <div class="row">
        <label>group:</label><br/>
        <select name="country" id="country-list"  onChange="getState(this.value);">

        <?php while($x--)
        {
            echo "<option value='.$group_id[$x].'>$group_name[$x]</option>";} ?>
        </select> 
    </div>
    <div class="row">
        <label>Services:</label><br/>
        <select name="state" id="state-list" class="demoInputBox">
        </select>
    </div>
</div>

和jQuery函数：

function getState(val) {
    $.ajax({
        type: "POSt",
        url: "http://abcd/Get_Service.php",
        data:'gp_id='+val,
        success: function(data){
            $("#state-list").html(data);
        }
    });
}

PHP输出：

<option value='5'>V Cut</option><option value='11'>Hair Wash Girls</option>
<option value='12'>Lakme Hair Cut</option>

我尝试了很多东西，但我仍然没有得到正确的输出。

Answer 1

您无法在选择框中设置html属性而不是那个给你的服务div id

<div class="row" id="services">
    <label>Services:</label><br/>
    <select name="state" id="state-list" class="demoInputBox">
    </select>
</div>

然后在你的php页面中将以下html代码放在php文件中的输出代码

<label>Services:</label><br/>
<select name="state" id="state-list" class="demoInputBox">
// Your php page output
</select>

然后最后在你的ajax代码中进行以下更改。

function getState(val) {
$.ajax({
    type: "POSt",
    url: "http://abcd/Get_Service.php",
    data:'gp_id='+val,
    success: function(data){
        $("#services").html(data);
    }
});
}

Answer 2

Rohan在评论中说： “ 阻止跨源请求：同源策略禁止在Get_Service.php读取远程资源。（原因：缺少CORS标头'Access-Control-Allow-Origin'） 。“

这是因为您尝试使Ajax请求与原始域不同：主机和/或端口不同

尝试使用此JavaScript函数：

function getState(val) {
    $.ajax({
        type       : "POSt",
        url        : "http://abcd/Get_Service.php",
        data       : "gp_id=" + val,
        dataType   : "jsonp",
        crossDomain: true,        
        success    : function(data){
            $("#state-list").html(data);
        }
    });
}

Answer 3

function getState(val) {
    $.ajax({
        type: "POSt",
        url: "http://abcd/Get_Service.php",
        data:'gp_id='+val,
        success: function(data){
        document.getElementById("state-list").innerHTML=data;
        }
    });
}

尝试覆盖id state-list

的innerHTML

Ajax代码不会附加到html select statment

3 个答案: