jQueryでselect要素のテキストを取得する方法
jQueryでselect要素のテキストを取得する方法を紹介します。 このエントリーでは、 プルダウンで選択したoption要素のテキスト取得 select要素内のすべてのoption要素のテキスト取得 指定したテキストに合致するoption要素を選択状態にする方法 について解説します。 それぞれのサンプルも用意しています。 １．選択したオプションのテキストを取得する 選択したオプションのテキストを取得するには「opstion:selected」とtext()を組み合わせます。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> jQuery(function(){ jQuery('#foo').change(function(){ alert(jQ
【jQuery】ラジオボタンの選択されている項目の取得 at softelメモ
問題 jQuery使ってます。 ラジオボタンの選択されている項目の文字の方を取得したいです。 答え ラジオボタンの、選択されている項目をあらわすセレクタは、name属性を使うとこう書ける。 input[name='kome']:checked 値を取得するには、 $("input[name='kome']:checked").val(); 表示しているテキストの方を取得するには、このままでは難しいが、label要素で囲んでしまうとやりやすい。 HTMLをこのようにして、 <label><input type="radio" name="kome" value="1">コシヒカリ</label> <label><input type="radio" name="kome" value="2">ひとめぼれ</label> <label><input type="radio" name="kom
はてな匿名ダイアリーの標準スタイルシートでデコるバッドノウハウ
pタグやdivタグのclass要素を指定できるのでHTMLでそのまま記述する。 いつくかはてなダイアリーでの使用可能なはてな記法は無効になっており、例えばキーワードリンク無効記法が使えないためフォントカラーが キーワードリンクの黒に潰されちゃうかんじ。 以下サンプル。アルファベットはクラス名(自動アンカーついていててコピペしにくい。ソースみたほうがいいかも)。 アイコンicon-arrow :: 矢印 icon-tag :: タグ icon-folder :: フォルダ icon-keyword :: キーワード icon-linlink :: インリンク icon-page :: ページ icon-user :: ユーザー icon-download :: ダウンロード out :: アウト フォントhatena-asin-detail-title :: 太字 synStatement
わずか1行のコードで「リアルタイムWeb通知」が実装可能になったMilkcocoaを試してみた！ : うえぶはっく
国産のバックエンドサービスとして人気の「Milkcocoa」ですが、いつの間にか「リアルタイムWeb通知」を実現できるようになっていたのでご紹介しておきます！ これが出来るようになると、自分のWebサイトやサービスなどを利用しているユーザーに向けて、スマホの「プッシュ通知」のような感覚で、リアルタイムに任意のメッセージを送信し、ユーザーのブラウザ上に表示させるようなことが出来るので便利です。 今回は、チュートリアル形式でサンプルを作っていく過程をご紹介しようと思います！ まずは初期設定をしよう！ まず最初に「Milkcocoa」にログインし、管理画面から新しいアプリを作成します。(無料プランで問題ありません…)
文字化け解説・文字化けパターンサンプル - instant tools
目次 文字化け解説・文字化けとは 概説 「文字コード違い」によって発生する文字化けの仕組み 文字化け解説・「文字化けテスター」で復元率を高めるコツ クエスチョンマークに置き換えられている部分 単独で安全な文字 単独で復元できない文字 句読点 QuizKnockのYouTube動画の補足 文字化け解説・文字化けパターンサンプル 元のファイルがUTF-8の場合 元のファイルがSJISの場合 元のファイルがEUC-JPの場合 文字化けのパターンのサンプルです。 このページでは、HTMLファイルのヘッダの文字コード指定が間違っている場合などに ブラウザで開いた際に発生する文字化けについて、それぞれの文字化けを閲覧者のブラウザで実際に発生させる事ができるサンプルを用意しました。 対象の文字コードは、UTF-8・Shift_JIS・EUC-JPの3つとしました (2015年3月現在で、日本語文字を表示
javascript - JavaScriptからファイルをダウンロードさせるのはどうしたら良いですか？ - スタック・オーバーフロー
contentをfileNameでダンロードしたい場合の実装 contentは生の文字列 var downloadAsFile = function(fileName, content) { var blob = new Blob([content]); var url = window.URL || window.webkitURL; var blobURL = url.createObjectURL(blob); var a = document.createElement('a'); a.download = fileName; a.href = blobURL; a.click(); }; コレでも可 var downloadAsFile = function(fileName, content) { var a = document.createElement('a'); a.d
HTMLテンプレートの基本ファイル一式、Webページを実装するための必要最小限をまとめたHTML
HTMLで、Webページやアプリを作成する時に役立つ、フロントエンド用に必要最小限をまとめたシンプルなHTMLの基本テンプレートのファイル一式を紹介します。 v.8.0.0がリリースされ、現在の環境に合わせた設計にアップデートされました。 IE11を含む、すべてのモダンブラウザをサポートしています。 HTML5 Boilerplate -GitHub HTML5 Boilerplateの特徴 HTMLの基本テンプレート HTML5 Boilerplateの使い方 HTML5 Boilerplateの特徴 HTML5 Boilerplateは、Webサイトやアプリを実装するためのプロフェッショナルなフロントエンド用のHTMLの基本テンプレートです。 実践的な基本のテンプレート 200人を超える貢献者による分析・研究・実験をもとにしています。 ブラウザの見え方を最適化 プログレッシブエンハンス
みんな大好きリキッドレイアウト～固定幅＋リキッドレイアウトに挑戦～ « SetucoCMSプロジェクト
はい、こんにちは。リーダーのskyguildこと三上です。 SetucoCMS合宿@2011のLT大会でリキッドレイアウトの話をしました。今回はそのスライド内で語り切れないデモの部分を中心に解説してみます。 リキッドレイアウトのLTスライド うまく表示されない方は下記のリンクからご覧ください。 みんな大好きリキッドレイアウト（別窓で開きます） 要約 リキッドレイアウトとは、可変レイアウトの一種で、ブラウザ幅に対して％で幅を指定する。 リキッドレイアウトなら閲覧環境に合わせて最適なレイアウトに可変できる！ とはいえ、「ナビゲーションの幅が可変すると使いづらい」とか一部は固定幅にしたい。そんな時の固定幅+リキッドレイアウト。 参考にしたサイト：「サイトの横幅」再論：950px時代のウェブデザイン 実装方法 というわけで、普通のリキッドレイアウトと、固定幅+リキッドレイアウトの実装方法について解
PHPでGET/POSTパラメータ等の変数名にドットが含まれると勝手にアンダースコアになるのでころしたいところだが対処する - 犬ターネット
昨日の続き。対処方法をググってコピペして動作確認した。対処の仕方は、 GETメソッドの場合は $_SERVER['QUERY_STRING'] を参照 POSTメソッドの場合は php://input を参照 となる。以下ソース。 なんとなく class にしたけど、function params(){} のほうが呼び出しは楽だろう。 あと、params() 呼び出すと GET と POST 両方もってきちゃうので、引数にGET/POST指定して該当するほうだけ取得、のほうがいい気がする。
緯度・経度からを住所取得する
Google Maps API V3で、google.maps.Geocoderクラスのgeocode()を使って、緯度・経度から住所を求めるサンプルプログラムです。プログラムに興味はなく、地図上で調べたいだけの場合は緯度・経度・住所・標高を取得するを。住所から緯度経度を求めたい場合は、地名や住所から緯度・経度を取得するを。 function getAddress(latlng) { // ジオコーダのコンストラクタ var geocoder = new google.maps.Geocoder(); // geocodeリクエストを実行。 // 第１引数はGeocoderRequest。緯度経度⇒住所の変換時はlatLngプロパティを入れればOK。 // 第２引数はコールバック関数。 geocoder.geocode({ latLng: latlng }, function(result
JavaScript Samples フリーサンプル - eWeb
JavaScriptは、ホームページに様々な機能、効果を加えることができるプログラムです。 サンプル・プログラムはご自由にカスタマイズなどをしてお使いください。
ライブドアみたいにスクロールしたらサイドバーの広告を固定する - ぼくはまちちゃん！
こんにちはこんにちは！！ 夏ですね！ 真夏ですね！！ ところで最近、ライブドアの一部の人気ブログで、サイドバーの挙動に「んん？」って思ったことありませんか！ …百聞は一見にしかずってことで、実際の例をみてみましょう！ ※PC版のみです ハムスター速報 (左のサイドバーを見ながら、下にスクロールしてください) 痛いニュース(ﾉ∀`) (右のサイドバーを見ながら、下にスクロールしてください) ある程度スクロールすると、サイドバーの広告がぴたっと固定されますね！ これって流行りなんでしょうか…！ そんなわけで、もしかしたら同じことをやりたい人が他にもいるのかも？と思って、 コピペで使えるJavaScriptにしてみました！ ↓ 動作サンプルです！ スクロールしたらサイドバーの広告を固定するスクリプトの動作サンプル ↓ コードはこれです！ 適当にコピペしてブログに貼り付けてね！ <script t
すごいWEB
Awesome and has more than a degree. We head out one. What it is overwhelming. It is dangerous stuff. Amazing what moves the people. And, in the sense of the excitement, the world can not be changed only amazing thing. I want to meet those amazing, really want to be. I think so anyone, I want to share with everyone and wow wow. It is amazing, amazing thing. Than it really is not that amazing. From
15 Useful Code Snippets for Smartphone Website
2014年8月22日 Webサイト制作, スマートフォン スマートフォンが普及してきて、Webサイトを作る時、スマートフォンサイトも一緒に制作している方も多くなってきていると思います。私もスマホサイトを制作する機会が増え、だんだんEvernoteに保存していたスマートフォンサイトを作る時の小技がたまってきたので、iPhoneで使える小技を中心にまとめて記事にしてみます。いくつかサンプルも作っているので、スマートフォンからあわせてご覧下さい！ ↑私が10年以上利用している会計ソフト！ スマートフォンサイト用小技集 目次 いくつかサンプルも作ったのでスマートフォンから、もしくはブラウザーからユーザーエージェントをiPhoneなどに切り替えてご覧ください！ 横幅をデバイスの幅にあわせる 文字サイズの自動調整をオフ リストのクリック（タップ）範囲を広げる 画面の幅にあわせてCSSを変える リンクテ
WebSocket Echo Server
WebSocket Echo Server We run a free very simple endpoint server with support for websockets and server-sent events (SSE) so that you can test your websocket and SSE clients easily. The server is designed for testing HTTP proxies and clients. It echoes information about HTTP request headers and bodies back to the client. The endpoint is https://echo.websocket.org/ Behavior Any messages sent from a
レイアウトが崩れる原因
ブラウザによる解釈の違い もともとCSSは「W3C」が推奨する基準なのですが、一時期 [ Internet Explorer ] [ ネットスケープ ] などのシェア争いのため、各々が独自のプログラムを持った事に始まってるみたいです。最新のブラウザは概ねCSSに準じてはいますが、それでも100%対応はしていません。 また、同じ [ Internet Explorer ] でも最新の [ Internet Explorer ] とちょっと前の [ Internet Explorer version5及び5.5 ] では明らかに表示が違います。 [ Mac ] も,,,, ボックスに対する解釈の違い では、具体的に何がどう違うのか説明します。スタイルシート/CSSで段組をする際は各要素(div | h | p 等)はすべて [ ボックス ] という領域（概念）を持ちます。 [ ボックス ] が
textarea のリサイズ機能を止めてみる
Firefoxや、Google Chrome、Safari辺りでいつの間にやら実装された、textarea のリサイズ機能はとても便利で良いなーとは思ってますが、止めたい時も有りますよね。 なので、止める方法を。 CSS3にそれっぽいプロパティが有るので、1行書くだけです。 textarea { resize: none; } こんな感じですね。 これは、ユーザー側で要素のリサイズ機能を許可するかしないかってプロパティなので、別にtextareaに限らず、overflowプロパティの値がvisible以外の指定が有る場合に使っていける感じです。 これだけだと、寂しいのでエントリーっぽくするために。 textarea以外に使うとしたら、トップページの新着情報みたいなので時々見る、高さ固定して overflow: auto; とかでスクロールバー出してる場合とかに使っていけばユーザー側でリサイ
[B! webdesign] gothedistanceのブックマーク
サンプルファイル サンプルファイルは下記のボタンよりダウンロードしてください。 DOWNLOAD サンプルサイト Chapter2 レスポンシブWebデザインのレイアウトパターン ワンカラムレイアウト フルードレイアウト ドロップレイアウト 固定幅+フルードレイアウト シフトレイアウト ワンキャンバスレイアウト ダイナミックフルードレイアウト Chapter3 レスポンシブWebデザインのサイト制作 TravelSpice（プロトタイプ） TravelSpice（完成版） 正誤表及び本文補足 P.127 誤 if(window.matchMedia("(min-width:768px)").matches&&$("#wrapper").hasClass("show")){ $("#wrapper").removeClass(); } 正 if(window.matchMedia("(min
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
電話占いで使われる占術をご紹介 | 当たる電話占いおすすめランキング～口コミで評判の当たる電話占いサイト紹介～
47NEWS
