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

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

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

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

Q&A

解決済

1回答

715閲覧

selectの値に応じてdatepickerのオプションを切り替える際の条件指定について

n-takahash

総合スコア15

JavaScript

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

0グッド

1クリップ

投稿2022/06/09 01:45

商品注文メールフォームを作成しております。
・商品A、B、C、Dにつき、それぞれのサイズをselectで選択
・受取日はjquery-uiのdatepickerで入力
・商品Aのみサイズを選択した場合は1日後から受取可
・商品B、C、Dいずれかを選択した場合は2日後から受取可
・例えば
商品A:サイズS、
商品C:サイズM
商品D:サイズM
であれば2日後から受取可
となるよう、
・商品選択箇所、
・日付入力箇所、
・商品選択に応じた受取可能日変更の記述
を以下のように作成しました。

html

1<!--商品選択箇所--> 2<select name="商品A"> 3<option value="">サイズ選択</option> 4<option value="S">S</option> 5<option value="M">M</option> 6</select> 7<select name="商品B" class="twodays"> 8<option value="">サイズ選択</option> 9<option value="S">S</option> 10<option value="M">M</option> 11</select> 12<select name="商品C" class="twodays"> 13<option value="">サイズ選択</option> 14<option value="S">S</option> 15<option value="M">M</option> 16</select> 17<select name="商品D" class="twodays"> 18<option value="">サイズ選択</option> 19<option value="S">S</option> 20<option value="M">M</option> 21</select> 22 23<!--日付入力箇所--> 24<input type="text" name="受取日" class="form-control date dateFrom hiduke" /> 25

javascript

1<!--受取可能日変更の記述--> 2<script> 3 $('select.twodays').change(function() { 4 var selected = []; 5 $('select.twodays').each(function(){ 6 selected.push($(this).val()); 7 }); 8 9 if( selected !==["", "", ""] ){ 10 $( ".hiduke" ).datepicker( "option", "minDate", "+2d" ); 11 } else { 12 $( ".hiduke" ).datepicker( "option", "minDate", "+1d" ); 13 } 14 }); 15</script>

この場合、
datepickerの挙動は
・初期値→1日後から受取可
・商品Aのサイズを選択→初期値のまま
・商品BCDいずれかのサイズを選択→2日後から受取可
となりましたが
商品BCDいずれかのサイズを選択し、
受取日が2日後に切り替わった後で
商品BCDのサイズ選択を「サイズ選択」
つまり空欄に切り替えても
datepickerの選択可能日が初期値に戻りません。

条件指定の間違いかと思いますが、
ご指摘ご教授いただけますようお願いします。

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

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

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

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

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

yambejp

2022/06/09 01:50

jquery-uiがサポート終了になったため継続利用はそろそろ厳しいかもしれません
n-takahash

2022/06/09 03:30

サポート終了の件、 アドバイスありがとうございます。 (今回は昔のフォームの改修のため、手間もかけられず…) 今後気をつけます。
guest

回答1

0

ベストアンサー

selected の要素のうち、少なくとも1つが空文字列ではない という判定をするための if 条件として、selected !==["", "", ""] は意図通りの結果にならず常にtrueになります。以下のように修正するとどうでしょう?

diff

1- if( selected !==["", "", ""] ){ 2+ if( selected.some(size => size) ){

投稿2022/06/09 03:06

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

n-takahash

2022/06/09 03:34

ありがとうございます。 いただいた修正で正常に動きました。 配列による分岐の理解が不十分でした…。 実はjoinで文字列化して これを空かどうかで分岐させても動きましたが、 この機会に someとeveryを使えるようにします。 助かりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問