選択オプションを非表示にし、定義済みのものをクリックした後にそれらを表示する - javascript、jquery、select、options

これは私の例です。

<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>​

ご覧のとおり、さまざまなオプションのある選択ボックスがあります。 私がしたいことは、val2とval5でオプションを非表示にすることですが、リストの最後に別のオプションを追加します <option value="more">more</option>.

「詳細」をクリックすると、非表示のオプションが表示されます。オプション「more」は、オプション「less」に置き換える必要があります。少ないクリックでオプションが再び非表示になります。

これは一例にすぎないことに注意してください。完全なリストには、50を超えるオプションが含まれています。ある種の配列に役立つでしょうか？

残念ながら、どのように始めればいいのかわかりません。 これに関する助けは大歓迎です。ありがとう。

更新 js-Partの私のコメントを見てください http://jsfiddle.net/bqyBQ/5/

回答：

私はこのようなことを試すだろう

<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>

これらの要素に新しいクラスを追加するだけで、デフォルトで非表示にする必要があります。次に、クリックイベントを詳細リンクに追加して、これらのクラスを切り替えます。この手法でもボタンを少なくするのは簡単です。

「詳細」オプションにリンクを作成します。 追加オプションをクリックすると、javascriptまたはjqueryを呼び出して、スクリプトからデータを動的に追加し、多かれ少なかれキャプションを切り替え、操作を追加および削除する必要があります