masquer les options de sélection et les afficher après avoir cliqué sur un élément défini - javascript, jquery, select, options

Ceci est mon exemple

<select name="mydropdownbox">
<option value="val1">val1</option>
<option value="val2">val2</option>
<option value="val3">val3</option>
<option value="val4">val4</option>
<option value="val5">val5</option>
<option value="val6">val6</option>
</select>​

Comme vous pouvez le constater, nous avons une zone de sélection avec différentes options. Ce que je veux faire est de masquer l'option avec val2 et val5, mais d'ajouter une autre option à la fin de la liste, comme <option value="more">more</option>.

En cliquant sur "plus", les options cachées doivent être affichées. l'option "plus" devrait être remplacée par une option "moins". En cliquant moins, les options devraient être à nouveau cachées.

S'il vous plaît gardez à l'esprit que ce n'est qu'un exemple. La liste complète contient plus de 50 options. Serait-ce utile pour une sorte de tableau?

Malheureusement, je n'ai aucune idée de comment commencer. Toute aide à ce sujet serait grandement appréciée. Merci.

METTRE À JOUR S'il vous plaît jeter un oeil à mes commentaires dans la partie js http://jsfiddle.net/bqyBQ/5/

Réponses:

Je voudrais essayer quelque chose comme ça

<select id="mydropdownbox" name="mydropdownbox">
<option value="val1">val1</option>
<option value="val2">val2</option>
<option value="val3">val3</option>
<option value="val4" class="hide">val4</option>
<option value="val5" class="hide">val5</option>
<option value="val6" class="hide">val6</option>
<option value="more" class="more">more</option>
</select>​

<style type="text/css">
.hide { display: none; }
</style>

<script type="text/javascript">
jQuery("#mydropdownbox .more").click(function() {
jQuery("#mydropdownbox .hide").attr("class", "show");
});
</script>

Il suffit de mettre une nouvelle classe à ces éléments, quidevrait être caché par défaut. Ajoutez ensuite un événement click au lien more pour faire basculer ces classes. Il serait également facile de créer un bouton moins avec cette technique.

Faites un lien dans l'option "plus". sur click of more option devrait appeler javascript ou jquery, ajouter les données de manière dynamique à partir du script et basculer la légende de more et less, ainsi que des opérations d'ajout et de suppression