質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

369閲覧

ajaxzip3とeasySelectBoxを併用したい

hiro421

総合スコア63

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2019/02/27 05:49

前提・実現したいこと

現在問い合わせフォームを作成しているのですが、
select要素に下記プラグインを使用しています。

【easyselectbox】
http://cly7796.net/wp/javascript/plugin-easyselectbox/

郵便番号からの住所自動入力は下記です。
【ajaxzip3】
https://github.com/ajaxzip3/ajaxzip3.github.io

ajaxzip3を使用した際にeasyselectboxで作られた擬似的なプルダウン要素にも住所自動入力が反映できるようにしたいです。

easyselectboxをつかわなければ良いのですが、どうしてもデザイン的に必要という状況です。

easyselectboxを使用しなくても同様の形で実装できればと思いますので
良いアドバイスいただけますと幸いです。

発生している問題・エラーメッセージ

問題としてはajaxzip3がselect要素には効くのですが、
easyselectboxを使用しているとselect要素はdisplay:noneになり、
.esb-displayerと.esb-dropdownというdiv要素で再現されるからだとは思うのですが。。

該当のソースコード

html

1 <div class="form-group"> 2 <div class="form-label"> 3 <label for="InputPostsCode"> 4 郵便番号</label> 5 </div> 6 <div class="form-item"> 7 <input id="InputPostsCode" type="text" name="PostsCode" value="" placeholder="例:123-4567"> 8 <input class="btn_postal" type="button" value="住所入力" onclick="AjaxZip3.zip2addr('PostsCode','Address1','Address2');"> 9 </div> 10 </div> 11 <div class="form-group"> 12 <div class="form-label"> 13 <label class="control-label" for="InputSelectAddress1">住所(都道府県)</label> 14 </div> 15 <div class="form-item"> 16 <select class="form-control js-select" id="InputSelectAddress1" name="Address1"> 17 <option value="0" selected="selected">選択してください</option> 18 <option value="1">北海道</option> 19 <option value="2">青森県</option> 20 <option value="3">岩手県</option> 21 <option value="4">宮城県</option> 22 <option value="5">秋田県</option> 23 <option value="6">山形県</option> 24 <option value="7">福島県</option> 25 <option value="8">茨城県</option> 26 <option value="9">栃木県</option> 27 <option value="10">群馬県</option> 28 <option value="11">埼玉県</option> 29 <option value="12">千葉県</option> 30 <option value="13">東京都</option> 31 <option value="14">神奈川県</option> 32 <option value="15">新潟県</option> 33 <option value="16">富山県</option> 34 <option value="17">石川県</option> 35 <option value="18">福井県</option> 36 <option value="19">山梨県</option> 37 <option value="20">長野県</option> 38 <option value="21">岐阜県</option> 39 <option value="22">静岡県</option> 40 <option value="23">愛知県</option> 41 <option value="24">三重県</option> 42 <option value="25">滋賀県</option> 43 <option value="26">京都府</option> 44 <option value="27">大阪府</option> 45 <option value="28">兵庫県</option> 46 <option value="29">奈良県</option> 47 <option value="30">和歌山県</option> 48 <option value="31">鳥取県</option> 49 <option value="32">島根県</option> 50 <option value="33">岡山県</option> 51 <option value="34">広島県</option> 52 <option value="35">山口県</option> 53 <option value="36">徳島県</option> 54 <option value="37">香川県</option> 55 <option value="38">愛媛県</option> 56 <option value="39">高知県</option> 57 <option value="40">福岡県</option> 58 <option value="41">佐賀県</option> 59 <option value="42">長崎県</option> 60 <option value="43">熊本県</option> 61 <option value="44">大分県</option> 62 <option value="45">宮崎県</option> 63 <option value="46">鹿児島県</option> 64 <option value="47">沖縄県</option> 65 <option value="48">海外</option> 66 <option value="49">その他</option> 67 </select> 68 </div> 69 </div> 70 <div class="form-group"> 71 <div class="form-label"> 72 <label for="InputSelectAddress2"> 73 住所</label> 74 </div> 75 <div class="form-item"> 76 <input id="InputSelectAddress2" type="text" name="Address2" value="" placeholder="例) 品川区0-0-0"> 77 </div> 78 </div>

javascript

1$(function() { 2 $('.js-select').easySelectBox({speed:100}); 3}); 4

試したこと

select要素をdisplay:block!importantにしてみたのですが、ajaxzip自体は動いているのですが、easyselectboxで生成された要素には反映されませんでした。
easyselectboxで生成された要素を選択するとdisplay:noneになっているselect要素にselectedが付くのでそのあたりを上手くやれば上手く行く気がするのですが、知識不足で良い方法がわからない状態です。

良い方法等ございましたら何卒ご協力お願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/02/27 07:41

ajaxzipで値が反映されたあとにもeasySelectBox()を呼び出してみては? すぐに試せないのでこちらのコメントのみで失礼します。
guest

回答1

0

ベストアンサー

正直言って、Ajaxzip3は「普通の入力フォーム」へ入力させることに特化していて、それ以外の処理を組み込むのはやりづらいです。

自分自身、AjaxZip3を捨てて、自分で郵便番号検索APIを呼ぶようなコードを作って対応したことがあります。

投稿2019/02/27 06:00

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問