Hola comunidad me encuentro con el siguiente problema, nececito llenar un select
con otro select desde ajax.
me explico: tengo un select de esta forma en mi archimo html
<div class="form-group mt-1">
<select class="form-control mt-1" id="frutas">
<option value="manzana">manzana</option>
<option value="uva">uva</option>
<option value="pera">pera</option>
</select>
</div>
<div class="form-group mt-1">
<!--este select es el que nececito llenar segun la fruta-->
<select class="form-control mt-1" id="clave-frutas">
</select>
</div>
lo que yo nececito es reemplasar solo los options
desde ana llamada a ajax , por ejemplo estoy intentando hacer lo siguinte...
archivo JS
$('#frutas').change(function(){
var category=$(this).val();
var url="ajax/select_category.php";
$.ajax({
url:url,
type:"POST",
data:{category:category}
}).done(function(data){
$("#clave-fruta").html(data);
})
})
y en mi archivo select_category.php tengo lo siguiente..
<?php
$category=$_POST["category"];
if ($category=="pera"){ ?>
<option value="granada">granada</option>
<option value="metralleta">metralleta</option>
<option value="pistola">pistola</option>
<?php }elseif($category=="manzana"){?>
<option value="cervesa">cervesa</option>
<option value="vino">vino</option>
<option value="champaña">champaña</option>
<?php }elseif($category=="uva"){?>
<option value="informatica">informatica</option>
<option value="programacion">programacion</option>
<option value="diseño">diseño</option>
} ?>
a la hora de el ajax devolver esos options los tira fuera de el select es decir yo espero un input tipo select
normal, pero me tira los options fuera como si fueran texto plano y se ven asi por ejepmlo si eligo manzana
cervesa
vino
champaña
como podria lograr lo que nececito alguna soluccion que estoy hacindo mal? gracias de ante mano
select