【ワレコの講座】「コンボボックス」「プルダウンメニュー」「ドロップダウンリスト」の理解

JavaScript

2019.01.11

この記事は約4分で読めます。

WEBプログラミングしていてこんな機能が必要になった。

「コンボボックス」「プルダウンメニュー」「ドロップダウンリスト」などと呼ばれる奴だ。

ワテは、違いが良く分からないので同じものだと思っていたが、気になったのでこの際調べた。
①　コンボボックス　　　　項目を選択出来る。編集も出来る。
②　プルダウンメニュー　　項目を選択出来る。編集は出来ない。
③　ドロップダウンリスト　項目を選択出来る。編集は出来ない。

つまり、編集できるやつをコンボボックスと言うらしい。

また、プルダウンメニューとドロップダウンリストは同じものと思って良いみたいだ。

冒頭でHTMLで作成したやつは編集出来ないので、厳密には②か③になるのかな。

でもまあ、自分ではコンボボックスと呼ぶ習慣が付いているのでcomboboxという名前を使う事が多い。

冒頭のHTML版のソースだ。

<select id="combobox_SelectLang_ID" onchange="select_lang_CB(id);">
<!--<option selected="selected">Select language</option>-->
<option value="ja">Japanese (日本語) ja</option>
<option value="en">English (英語) en</option>
</select>

項目を切り替えた場合にその値を取得したくなるだろう。

JQueryだとこんな感じか。

<script>
    function select_langJQ_CB(id) {
        var sel_ind = jQuery('#' + id)[0].selectedIndex;
        var sel_val = jQuery('#' + id)[0].value;
        var sel_txt = jQuery('#' + id).find('option:selected').text();
        alert('sel_ind=' + sel_ind + '\r\nsel_val=' + sel_val + '\r\nsel_txt=' + sel_txt);
    }
</script>

ちなみにWordPressでjQueryを使う場合は $ ではなくて jQuery を使うらしい。

何でや？要調査だ。

JavaScriptのみでやる場合はこんな感じか。

<script>
    function select_lang_CB(id) {
        var elt = document.getElementById(id);
        if (elt.selectedIndex == -1)
            return null;
        var sel_ind = elt.selectedIndex;
        var sel_val = elt.options[elt.selectedIndex].value;
        var sel_txt = elt.options[elt.selectedIndex].text;
        alert('sel_ind=' + sel_ind + '\r\nsel_val=' + sel_val + '\r\nsel_txt=' + sel_txt);
    }
</script>

こういうプログラミングをやっていると、ワテは良く混乱する。

それは、

.val

.value

.text

.val()

.value()

.text()

みたいな似たようなのが沢山出て来るからだ。

未だにどれを使ったら目的の値が取得できるのか混乱する。

良い記憶方法はあるのかな？

ちなみに textarea の場合には val() や value が良いみたい。

var val = $('myTextarea').val();                      //jQueryの場合
var val = document.getElementById('myTextarea').value;//JavaScriptの場合

stackoverflowの　val() vs. text() for textarea この記事書いてあるのを見付けた。

jQueryの本買って勉強するかな。

SBクリエイティブ

自ら最高と名乗る以上は本当に最高なんだろうな。ワテは疑い深い。

本のタイトルで「最高」なんて聞くと、

美味しんぼ究極vs至高 4: マイファーストビッグ (My First Big SPECIAL)

小学館

を連想する。

この回はなかなか興味深かった。