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中的值（因为我试图在新选择中排除先前选择的选项）。我希望有一个人可以帮助我！提前谢谢。

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"];获取值，并使用该值来限制返回选项。

<强>更新

如果您要多次触发更改事件，则每次都会附加新数据。如果这不是您想要的行为，请添加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

使用＆＃34; artist_field.php＆＃34;返回包含要放在＆lt; select＆gt;中的所有元素的字符串元素用逗号分隔。我希望它会有所帮助☻☺

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

以下代码可让您使用select轻松了解on change使用ajax请求标记PHP。

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 Library源代码：

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

使用AJAX添加select onchange

4 个答案: