Topic www.unofficialwsx5.com
Proprietà Pagina - Esperto - Prima della chiusura del tag HEAD
<script>
$(document).ready(function() {
$('.select_dyn select').change(function() {
if ($(this).attr('id') == 'select1') {
var sel1 = $("#select1").val();
var sel2 = $("#select2");
$("#select2 option").remove();
//quadrato
if (sel1 == 1) {
sel2.append("<option value='giallo'>Giallo</option>");
sel2.append("<option value='nero'>Nero</option>");
sel2.append("<option value='rosso'>Rosso</option>");
//triangolo
} else if (sel1 == 2) {
sel2.append("<option value='blu'>Blu</option>");
sel2.append("<option value='rosso'>Rosso</option>");
sel2.append("<option value='verde'>Verde</option>");
}
}
var forma = $('#select1 option:selected').text();
var colore = $('#select2').val();
// funzionalità offline
if (location.host == "127.0.0.1:8080")
$('#link').attr('onclick', 'alert("La funzione sarà attiva solo quando il Sito verrà pubblicato online.")');
else
$('#link').attr('href', 'imsearch.php?search=' + forma + '+' + colore + '&type=images');
});
});
</script>
Oggetto Codice HTML
<form name="form">
<div class="select_dyn">
<span class="arrow"></span>
<select id="select1">
<option value="">Seleziona forma...</option>
<option value="1">Quadrato</option>
<option value="2">Triangolo</option>
</select>
</div>
<div class="select_dyn">
<span class="arrow"></span>
<select id="select2">
<option value="">-</option>
</select>
</div>
<div>
<a id="link" href="#nogo">CERCA</a>
</div>
</form>
Oggetto Codice HTML - Esperto
.select_dyn {
position: relative;
display: inline-block;
border: 2px solid #7C7C7C;
border-radius: 6px;
width: 49%;
margin-bottom: 20px;
box-sizing: border-box;
}
.select_dyn select {
outline: none;
-webkit-appearance: none;
padding: 0.2em;
margin: 0;
border: 5px solid #F2F2F2;
border-radius: 6px;
background: #F2F2F2;
color: #000;
width: 100%;
font-size: 20px;
}
.select_dyn select::-ms-expand {
display: none;
}
.select_dyn .arrow {
background: #F2F2F2;
bottom: 5px;
position: absolute;
right: 5px;
top: 5px;
width: 50px;
pointer-events: none;
}
.select_dyn .arrow:before {
content: '';
position: absolute;
top: 50%;
right: 8px;
margin-top: -5px;
pointer-events: none;
border-top: 10px solid #333333;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.select_dyn .arrow:after {
content: '';
position: absolute;
top: 50%;
right: 28px;
margin-top: -5px;
pointer-events: none;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
}
#link {
display: inline-block;
text-decoration: none;
background-color: #0078F0;
border-radius: 6px;
box-sizing: content-box;
color: #ffffff;
font-size: 20px;
cursor: pointer;
padding: 0.5em;
box-sizing: border-box;
width: 98%;
}
@media (max-width: 719px) {
.select_dyn {
width: 100%;
}
}