Add select onchange with AJAX

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.

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