I'm a newbie to Javascript so I couldn't find an answer to my problem. I want to add an extra select when a previous select is changed. I know my code should look something likes this but it isn't working:

$(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>

My problem is that I don't know how to get the values in artist_field.php that I'm trying to send (because I'm trying to exclude the previous selected option in the new select). I hope someone can help me! Thanks in advance.

I'm a newbie to Javascript so I couldn't find an answer to my problem. I want to add an extra select when a previous select is changed. I know my code should look something likes this but it isn't working:

$(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>

My problem is that I don't know how to get the values in artist_field.php that I'm trying to send (because I'm trying to exclude the previous selected option in the new select). I hope someone can help me! Thanks in advance.

• javascript
• php
• jquery
• ajax

• You need to show your php file, and also show us your result. – Buzinas Commented Apr 3, 2014 at 14:38
• Maybe you could have the second select hidden and just show it when it matches the value of the first – gbestard Commented Apr 3, 2014 at 14:40
• By the way, you have the same id for the td tag and the select, you should change one of them – gbestard Commented Apr 3, 2014 at 14:49

4 Answers 4

$(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>

It will only show the second select if you chose something on the first one

Update: I just noticed that you have the ID artist in the code twice. You might change the TD to <td id="artist_td"> or something for my example to work

To send the currently selected option back to the server in the post, you can do something like:

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

Then in the PHP document, you can get the value with $_POST["value"];, and use that value to limit the return options.

update

If you are going to fire the change event off multiple times, it's going to append the new data every time. If this is not the behavior that you want, add a div or something to put the new data into like:

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

Then edit the success function

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

With "artist_field.php" returning a string containing all elements to place in the <select> element separated by commas. I hope it will help ☻ ☺

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;
}

Here is the code where you can easily understand select Tag on change with ajax request using PHP.

HTML Code

<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 Code

<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 Source Code:

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