Selector não aceita value=""

Question

Estou tentando fazer com que meu select fique vazio após o select anterior ser modificado. (Visto que os dois são interligados, onde o select1 é estado e conforme o estado é liberado as cidades no select2

Código HTML onde a pessoa seleciona o estado, após selecionado estado retorna as cidades do estado selecionado, e possui o botão buscar para buscar itens presentes na respectiva cidade.

<div class="row rol-inp">
                    <div class="row input-form">
                    <div id="slct-estado">
                            <span class="blt"></span>
                            <select id="selectEstado" name="estado" onchange="javascript: getCitiesFromState(this.value)">
                                <option value="">Estado </option>
                                <?php foreach ($estados as $est) { ?>
                                <option value="<?php echo $est->UF; ?>"> <?php echo $est->UF; ?> </option>
                                <?php } ?>
                            </select>
                    </div>
                    </div>

                    <div class="row input-form">
                    <div id="slct-estado">
                            <span class="blt"></span>
                            <select id="cidadesSelect" name="cidades">
                                <option value=""> Cidade </option>
                            </select>
                    </div>
                    </div>

                    <div class="row borda">
                    <a onclick="getStoresFromCity(this.value)" class="bt-concluir"><strong>Encontrar</strong></a>    
                    </div>  
                </div>

Abaixo, código que pega as cidades conforme estado, que já possue value="", mas não está funcionando.

 function getCitiesFromState(estado) {

    document.querySelector('select[name=cities]').value="";

    $.ajax({
        url: ROOT + LANG + "/facebook/getCitiesFromState",
        dataType: "html",
        type: 'POST',
        data: {
            estado: estado
        },
        success: function (html) {
            $("#cidadesSelect").html(html);
        }

    });

}

Answer 1

Em vez de usar o seletor select[name=cities], use o mesmo seletor do id do select que está usando para preenchê-lo, que é #cidadesSelect.

Você pode fazer de duas formas:

JavaScript puro:

document.querySelector('#cidadesSelect').innerHTML = '';
ou
document.getElementById('cidadesSelect').innerHTML = '';

jQuery:

$('#cidadesSelect').empty();
ou
$('#cidadesSelect').html('');
ou
$('#cidadesSelect option').remove();

Answer 2

Testa assim:

$('#seuSelect').empty();

*Obs: Use o jQuery