デジタルゲート – ホームページ制作やリニューアル、サイトの企画・制作・運営をしています

select

  • AjaxでCSVを読み込みJavascriptDBを使いselectで抽出表示する方法

    ·

    master

    JavascriptのみでデータをMySQLのように扱えるJavascriptDBは既存のデータの抽出にも使える。
    (さらに…)

  • Javascript複数のセレクトメニュー（プルダウンメニュー）どちらかが変更されたらGETで送信したい時

    ·

    master

    表示の絞り込み等で複数のセレクトメニューを使用している時、送信ボタンをクリックしなくてもセレクトメニューに変更があった時点で送信してくれると便利な場合がある。

    ちなみにセレクトメニュー（プルダウンメニュー）が１個の場合は

    Javascript

    function navi(c){
var class = c.options[c.selectedIndex].value;
location.href = '?c=' + class;
}

    HTML

    <form method="get" action="" name="form">
	<select name="class" onChange="navi(this)" id="class-items">
		<option value="0">全クラス表示</option>
		<option value="1">１組</option>
		<option value="2">２組</option>
	</select>
</form>

    上記ではクラスのプルダウンを変更すると同ページにGETで引数が付いた状態でジャンプする。

    例　http://www.digital-gate.com/?c=3

    セレクトメニュー（プルダウンメニュー）が２個の場合は

    Javascript

    function multipleNavi(obj){
var class = document.form.class.value;
var group = document.form.group.value;
location.href = '?c=' + class + '&g=' + group;
}

    HTML

    <form method="get" action="" name="form">
	<select name="class" onChange="multipleNavi()" id="class-items">
		<option value="0">全クラス表示</option>
		<option value="1">１組</option>
		<option value="2">２組</option>
	</select>
	<select name="group" onChange="multipleNavi()" id="group-items">
		<option value="0">全グループ表示</option>
		<option value="1">グループ1</option>
		<option value="2">グループ2</option>
	</select>
</form>

    上記ではクラスまたはグループいずれかのプルダウンを変更すると同ページにGETで両方の引数が付いた状態でジャンプする。

    例　http://www.digital-gate.com/?c=2&g=1

  • jquery mobileでプルダウンを選択状態にしたい時

    ·

    master

    javascriptを使ってデータを取得したり、フォルダや引数からデータを取得したものをフォームのプルダウンメニューに反映させたいことは多いはず。
    javascriptを使いセレクトメニューを選択済にする方法はいろいろなサイトで公開されているのから困らないが、通常のjavascriptで選択状態にするだけでは、jquery mobileを使っている場合に反映されない。

    jquery mobileを使用する環境でjavascriptを使って任意のプルダウンメニューを選択状態にしたい時は以下のサンプルを参考にすると良い。

    HTML

    <form method="get" action="" id="select">
    <select name="menu" id="course">
        <option value="">選択してください</option>
        <option value="1">セレクト1</option>
        <option value="2">セレクト2</option>
        <option value="3">セレクト3</option>
        <option value="4">セレクト4</option>
        <option value="5">セレクト5</option>
    </select>
</form>

    javascript

    <script type="text/javascript">
    //選択済にしたい項目のvalue
    var co = 2;

    //該当するselectのIDにセット
    $('#course').val(co);

    //jquery mobile用の処理
    $('select').selectmenu('refresh',true);
</script>

    最後の

    $('select').selectmenu('refresh',true);

    がポイント