esta es mi primera pregunta y quería saber si pueden ayudarme. Estoy tratando de hacer un selector de componentes (como los que hay en las tiendas online de pc), quería saber cómo podría hacer si elijo un componente, la parte que dice "Seleccionar componente" cambie al nombre del componente elegido. Para que me entiendan mejor les dejo mi código y una imagen. No puedo agregar el CSS porque se me hace muy largo y no me deja publicar.
JQUERY:
$(document).ready(function(){
$('.show-list').on('click', function(){
$('.products').slideToggle('slow');
$('.products li').on('click', function(){
$('.products').slideUp('fast');
$('.products-container ul').show('.mothers');
});
});
});
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Arma tu PC</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=DotGothic16&display=swap" rel="stylesheet">
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div class="container">
<h1>Armá tu PC</h1>
<div class="products__list">
<div class="products_items">
<a href="#" class="show-list">Seleccionar componentes</a>
<ul class="products">
<div class="opciones">
<li><a href="#" tipo="Placa madre"><img src="img/icons/motherboard.png" alt="">Placa madre</a></li>
</div>
<div class="opciones">
<li><a href="#" tipo="Procesador"><img src="img/icons/cpu.png" alt="">Procesador</a></li>
</div>
<div class="opciones">
<li><a href="#" tipo="Cooler"><img src="img/icons/fan.png" alt="">Cooler</a></li>
</div>
<div class="opciones">
<li><a href="#" tipo="RAM"><img src="img/icons/ram.png" alt="">Ram</a></li>
</div>
<div class="opciones">
<li><a href="#" tipo="HDD"><img src="img/icons/harddisk.png" alt="">Disco duro</a></li>
</div>
<div class="opciones">
<li><a href="#" tipo="Placa de video"><img src="img/icons/videocard.png" alt="">Placa de video</a></li>
</div>
<div class="opciones">
<li><a href="#" tipo="Fuente"><img src="img/icons/power.png" alt="">Fuente</a></li>
</div>
<div class="opciones">
<li><a href="#" tipo="Gabinete"><img src="img/icons/case.png" alt="">Gabinete</a></li>
</div>
</ul>
</div>
</div>
</div>
<!--Productos-->
<div class="products-container">
<ul>
<li class="mothers"><a href="#"><img src="img/comps/mother/m1.jpg"></a></li>
<p>Mother ASUS PRIME H310M-R R2.0 1151 OEM<br>
Precio: $6,590.00</p>
<li><a href="#"><img src="img/comps/mother/m2.jpg"></a></li>
<p>Mother ASUS PRIME H310M-R R2.0 1151 OEM<br>
Precio: $6,590.00</p>
<li><a href="#"><img src="img/comps/mother/m3.jpg"></a></li>
<p>Mother ASUS PRIME H310M-R R2.0 1151 OEM<br>
Precio: $6,590.00</p>
<li><a href="#"><img src="img/comps/mother/m4.jpg"></a></li>
<p>Mother ASUS PRIME H310M-R R2.0 1151 OEM<br>
Precio: $6,590.00</p>
<li><a href="#"><img src="img/comps/mother/m5.jpg"></a></li>
<p>Mother ASUS PRIME H310M-R R2.0 1151 OEM<br>
Precio: $6,590.00</p>
<li><a href="#"><img src="img/comps/mother/m6.jpg"></a></li>
<p>Mother ASUS PRIME H310M-R R2.0 1151 OEM<br>
Precio: $6,590.00</p>
</ul>
</div>
</body>
</html>
No pude subir bien la imagen porque estoy en el trabajo. La idea es que al seleccionar, por ejemplo "Placa madre", donde dice "Seleccionar componente" cambie a "Place madre" con su icono.