使用AJAX添加選擇onchange

Question

我是Javascript的新手，所以找不到我的問題的答案。 我想在更改前一個選擇時添加一個額外的選擇。 我知道我的代碼應該看起來像這樣，但是它不起作用：

$(function(){
$('#artist').change(function(){
    $.ajax({
        url: "artist_field.php",
        dataType:"html",
        type: "post",
        success: function(data){
           $('#artist').append(data);
        }
    });
});
});

HTML

<td id="artist">
<select name="artist_1" id="artist">
<option value=""></option>
</select>
</td>

我的問題是，我不知道如何獲取我要發送的artist_field.php中的值（因為我試圖在新的select中排除先前選擇的選項）。 我希望有一個人可以幫助我！ 提前致謝。

Answer 1

$(document).ready(function() {
 $('#select_2').hide();
$('#artist').change(function(){
   $('#select_2').show();
});
});

HTML

<td id="artist">
<select name="artist_1" id="artist">
<option value=""></option>
</select>
</td>
<td>
<select name="select_2" id="select_2">
<option value=""></option>
</select>
</td>

如果您在第一個選擇上選擇了某項，它只會顯示第二個選擇

Answer 2

更新：我剛剛注意到您在代碼中有兩次ID藝術家。 您可以將TD更改為<td id="artist_td">或使我的示例正常工作的內容

要將當前選擇的選項發送回帖子中的服務器，您可以執行以下操作：

$('#artist').change(function(){
    $.ajax({
        url: "artist_field.php",
        data: { "value": $("#artist").val() },
        dataType:"html",
        type: "post",
        success: function(data){
           $('#artist').append(data);
        }
    });
});

然后，在PHP文檔中，您可以使用$_POST["value"];獲取值$_POST["value"]; ，並使用該值限制返回選項。

更新

如果您要多次觸發change事件，它將每次都添加新數據。 如果這不是您想要的行為，請添加一個div或類似的東西以將新數據放入：

<td id="artist_td">
<select name="artist_1" id="artist">
<option value=""></option>
</select>
<div id="newdata"></div>
</td>

然后編輯成功功能

success: function(data){
   $('#newdata').empty().append(data);
}

Answer 3

使用“ artist_field.php”返回一個字符串，該字符串包含所有要放置在<select>元素中的元素，以逗號分隔。 希望對你有幫助

window.addEventListener("load", function(){
    var list = document.getElementById("artist");
    var xhr = Xhr();
    xhr.onreadystatechange = function(e){
        if(xhr.status === 4 || xhr.status === 200)
        {
            var results = (xhr.responseText).split(',');
            for(var i = 0; i < results.length; ++i)
            {
                var el = document.createElement("option");
                el.innerHTML = results[i];
                list.appendChild(el);
            }
        }
    };
    xhr.open("GET", "artist_field.php", false);
    xhr.send(null);
}, false);

function Xhr()
{
    try {
        return new XMLHttpRequest();
    }catch(e){}
    try {
        return new ActiveXObject("Msxml3.XMLHTTP");
    }catch(e){}
    try {
        return new ActiveXObject("Msxml2.XMLHTTP.6.0");
    }catch(e){}
    try {
        return new ActiveXObject("Msxml2.XMLHTTP.3.0");
    }catch(e){}
    try {
        return new ActiveXObject("Msxml2.XMLHTTP");
    }catch(e){}
    try {
        return new ActiveXObject("Microsoft.XMLHTTP");
    }catch(e){}
    return null;
}

Answer 4

這是您可以輕松理解使用PHP使用ajax請求on change時select標簽的代碼。

HTML代碼

<div class="form-group">
    <label>Select SMS Template</label>
    <select id="sms-select" name="sms-select" onchange="smschange(this.value)" class="form-control">
        <option value="">Select SMS Template</option>
            <?php foreach ($sms as $row) { ?>
                <option value="1">Sample SMS</option>
                <option value="2">Test SMS</option> 
            <?php } ?>
    </select>
</div>

JavaScript代碼

<script>
    function smschange(id)
    {
        $.ajax({
            type: 'post',
            data: {'id': id},
            url: 'sms.php',
            dataType: 'json',
            success: function(res){
               alert(res);
            },
            error: function(res){
                $('#message').text('Error!');
                $('.dvLoading').hide();
            }
        });
    }
</script>

jQuery庫源代碼：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">