teratail
回答率
85.46%
質問するログイン新規登録

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

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

新規登録して質問してみよう
ただいま回答率
85.46%
トップHTML5に関する質問
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

jQuery

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

Q&A

解決済

1回答

909閲覧

【jQuely】HTMLのoptionタグで選択したものによって、条件分岐を発生させる。

退会済みユーザー

退会済みユーザー

総合スコア0

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

jQuery

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

0グッド

0クリップ

投稿2021/11/24 08:11

0

0

やりたいこと
添付画像のような、「検索機能」を実装しています。
項目1 オンラインかオフラインか
項目2 都道府県
項目3 開催日
上記3項目を組み合わせて、検索ボタンから条件にあったものを出力します。

その中で、
change()メソッドを使用して、オンラインが指定された場合は「都道府県」の入力欄が不要になるためdisabled属性をつけて無効化し、文言も「入力不要です」に変更します。

「検索する」を押すと条件にもとづいたものが正しく出力され、入力欄の値も残ります。
ただ、change()メソッドなので、値を変更したことがトリガーになってしまい、
検索後にオンラインの値が出ていたとしても、「入力不要です」にはならないのでこれを改善したいです。

入力欄に表示されている値に基づいて処理をしたいのですが、お力添えいただけないでしょうか。
よろしくお願いします。

添付画像1(検索前)
イメージ説明

添付画像2(検索後)
イメージ説明

jQuelyの該当箇所のコード

// ワークショップエリア「もし「対面」であれば、「都道府県のエリアを隠す」
$('#lessontype').on('change', function () {

  const selected = $('#lessontype').val();
  if( selected == 1 ){
    $('#prefecture').prop('disabled', true);
    $('#prefecturetext').text("入力不要です");
  } else {
    $('#prefecture').prop('disabled', false);
    $('#prefecturetext').text("都道府県");
  }
});
コード

WordPressのテンプレートファイル

<?php
$lesson_area = array(
  '1'  => '北海道',
  '2'  => '青森県',
  '3'  => '岩手県',
  '4'  => '宮城県',
  '5'  => '秋田県',
  '6'  => '山形県',
  '7'  => '福島県',
  '8'  => '茨城県',
  '9'  => '栃木県',
  '10' => '群馬県',
  '11' => '埼玉県',
  '12' => '千葉県',
  '13' => '東京都',
  '14' => '神奈川県',
  '15' => '新潟県',
  '16' => '富山県',
  '17' => '石川県',
  '18' => '福井県',
  '19' => '山梨県',
  '20' => '長野県',
  '21' => '岐阜県',
  '22' => '静岡県',
  '23' => '愛知県',
  '24' => '三重県',
  '25' => '滋賀県',
  '26' => '京都府',
  '27' => '大阪府',
  '28' => '兵庫県',
  '29' => '奈良県',
  '30' => '和歌山県',
  '31' => '鳥取県',
  '32' => '島根県',
  '33' => '岡山県',
  '34' => '広島県',
  '35' => '山口県',
  '36' => '徳島県',
  '37' => '香川県',
  '38' => '愛媛県',
  '39' => '高知県',
  '40' => '福岡県',
  '41' => '佐賀県',
  '42' => '長崎県',
  '43' => '熊本県',
  '44' => '大分県',
  '45' => '宮崎県',
  '46' => '鹿児島県',
  '47' => '沖縄県'
);

/*検索後のパラメータ*/
$term_id = null;
$lesson_area = '';
$lesson_class = '';
$lesson_area = '';
$lesson_date = '';

if( !empty($_GET) ){
  $lesson_type = $_GET['lesson_type']   ? $_GET['lesson_type'] : null ;
  $lesson_class = $_GET['lesson_class']   ? $_GET['lesson_class'] : null ;
  $lesson_area  = $_GET['lesson_area']    ? $_GET['lesson_area']  : null ;
  $lesson_date  = $_GET['lesson_date']    ? $_GET['lesson_date']  : null ;
}
get_header(); ?>

<main class="Lesson-workshopPageContainer">

  <!-- 検索ボックス -->
  <div class="searchTitleBlock">
    <p>ワークショップを検索する</p>
    <p>ご希望の開催形式、開催場所で<br class="spview">スケジュールを出力することが可能です</p>
  </div>

  <div class="searchWrapper">
   <div class="searchInner">
    <form action="<?php echo home_url('/lesson-workshop'); ?>/" method="get">

     <div class="searchSelectForm">
      <select name="lesson_type" id="lessontype">
       <option value="">開催形式</option>
       <option value="1" <?php if( $_GET['lesson_type'] && $_GET['lesson_type'] == '1' ) echo ' selected';?>>オンライン</option>
       <option value="2" <?php if( $_GET['lesson_type'] && $_GET['lesson_type'] == '2' ) echo ' selected';?>>対面</option>
      </select>
     </div>

     <div class="searchSelectForm prefectureForm">
      <select name="lesson_area" id="prefecture">
       <option value="" id="prefecturetext">都道府県</option>
       <option value="1" <?php if( $_GET['lesson_area'] && $_GET['lesson_area'] == '1' ) echo ' selected';?>>北海道</option>
       <option value="2" <?php if( $_GET['lesson_area'] && $_GET['lesson_area'] == '2' ) echo ' selected';?>>青森県</option>
       <option value="3" <?php if( $_GET['lesson_area'] && $_GET['lesson_area'] == '3' ) echo ' selected';?>>岩手県</option>
       <option value="4" <?php if( $_GET['lesson_area'] && $_GET['lesson_area'] == '4' ) echo ' selected';?>>宮城県</option>
       <option value="5" <?php if( $_GET['lesson_area'] && $_GET['lesson_area'] == '5' ) echo ' selected';?>>秋田県</option>
       <option value="6" <?php if( $_GET['lesson_area'] && $_GET['lesson_area'] == '6' ) echo ' selected';?>>山形県</option>
       <option value="7" <?php if( $_GET['lesson_area'] && $_GET['lesson_area'] == '7' ) echo ' selected';?>>福島県</option>
       <option value="8" <?php if( $_GET['lesson_area'] && $_GET['lesson_area'] == '8' ) echo ' selected';?>>茨城県</option>
       <option value="9" <?php if( $_GET['lesson_area'] && $_GET['lesson_area'] == '9' ) echo ' selected';?>>栃木県</option>
       <option value="10" <?php if( $_GET['lesson_area'] && $_GET['lesson_area'] == '10' ) echo ' selected';?>>群馬県</option>
       <option value="11" <?php if( $_GET['lesson_area'] && $_GET['lesson_area'] == '11' ) echo ' selected';?>>埼玉県</option>
       <option value="12" <?php if( $_GET['lesson_area'] && $_GET['lesson_area'] == '12' ) echo ' selected';?>>千葉県</option>
       <option value="13" <?php if( $_GET['lesson_area'] && $_GET['lesson_area'] == '13' ) echo ' selected';?>>東京都</option>
       <option value="14" <?php if( $_GET['lesson_area'] && $_GET['lesson_area'] == '14' ) echo ' selected';?>>神奈川県</option>
       <option value="15" <?php if( $_GET['lesson_area'] && $_GET['lesson_area'] == '15' ) echo ' selected';?>>新潟県</option>
       <option value="16" <?php if( $_GET['lesson_area'] && $_GET['lesson_area'] == '16' ) echo ' selected';?>>富山県</option>
       <option value="17" <?php if( $_GET['lesson_area'] && $_GET['lesson_area'] == '17' ) echo ' selected';?>>石川県</option>
       <option value="18" <?php if( $_GET['lesson_area'] && $_GET['lesson_area'] == '18' ) echo ' selected';?>>福井県</option>
       <option value="19" <?php if( $_GET['lesson_area'] && $_GET['lesson_area'] == '19' ) echo ' selected';?>>山梨県</option>
       <option value="20" <?php if( $_GET['lesson_area'] && $_GET['lesson_area'] == '20' ) echo ' selected';?>>長野県</option>
       <option value="21" <?php if( $_GET['lesson_area'] && $_GET['lesson_area'] == '21' ) echo ' selected';?>>岐阜県</option>
       <option value="22" <?php if( $_GET['lesson_area'] && $_GET['lesson_area'] == '22' ) echo ' selected';?>>静岡県</option>
       <option value="22" <?php if( $_GET['lesson_area'] && $_GET['lesson_area'] == '23' ) echo ' selected';?>>愛知県</option>
       <option value="23" <?php if( $_GET['lesson_area'] && $_GET['lesson_area'] == '24' ) echo ' selected';?>>三重県</option>
       <option value="24" <?php if( $_GET['lesson_area'] && $_GET['lesson_area'] == '25' ) echo ' selected';?>>滋賀県</option>
       <option value="25" <?php if( $_GET['lesson_area'] && $_GET['lesson_area'] == '26' ) echo ' selected';?>>京都府</option>
       <option value="26" <?php if( $_GET['lesson_area'] && $_GET['lesson_area'] == '27' ) echo ' selected';?>>大阪府</option>
       <option value="27" <?php if( $_GET['lesson_area'] && $_GET['lesson_area'] == '28' ) echo ' selected';?>>兵庫県</option>
       <option value="28" <?php if( $_GET['lesson_area'] && $_GET['lesson_area'] == '29' ) echo ' selected';?>>奈良県</option>
       <option value="30" <?php if( $_GET['lesson_area'] && $_GET['lesson_area'] == '30' ) echo ' selected';?>>和歌山県</option>
       <option value="31" <?php if( $_GET['lesson_area'] && $_GET['lesson_area'] == '31' ) echo ' selected';?>>鳥取県</option>
       <option value="32" <?php if( $_GET['lesson_area'] && $_GET['lesson_area'] == '32' ) echo ' selected';?>>島根県</option>
       <option value="33" <?php if( $_GET['lesson_area'] && $_GET['lesson_area'] == '33' ) echo ' selected';?>>岡山県</option>
       <option value="34" <?php if( $_GET['lesson_area'] && $_GET['lesson_area'] == '34' ) echo ' selected';?>>広島県</option>
       <option value="35" <?php if( $_GET['lesson_area'] && $_GET['lesson_area'] == '35' ) echo ' selected';?>>山口県</option>
       <option value="36" <?php if( $_GET['lesson_area'] && $_GET['lesson_area'] == '36' ) echo ' selected';?>>徳島県</option>
       <option value="37" <?php if( $_GET['lesson_area'] && $_GET['lesson_area'] == '37' ) echo ' selected';?>>香川県</option>
       <option value="38" <?php if( $_GET['lesson_area'] && $_GET['lesson_area'] == '38' ) echo ' selected';?>>愛媛県</option>
       <option value="39" <?php if( $_GET['lesson_area'] && $_GET['lesson_area'] == '39' ) echo ' selected';?>>高知県</option>
       <option value="40" <?php if( $_GET['lesson_area'] && $_GET['lesson_area'] == '40' ) echo ' selected';?>>福岡県</option>
       <option value="41" <?php if( $_GET['lesson_area'] && $_GET['lesson_area'] == '41' ) echo ' selected';?>>佐賀県</option>
       <option value="42" <?php if( $_GET['lesson_area'] && $_GET['lesson_area'] == '42' ) echo ' selected';?>>長崎県</option>
       <option value="43" <?php if( $_GET['lesson_area'] && $_GET['lesson_area'] == '43' ) echo ' selected';?>>熊本県</option>
       <option value="44" <?php if( $_GET['lesson_area'] && $_GET['lesson_area'] == '44' ) echo ' selected';?>>大分県</option>
       <option value="45" <?php if( $_GET['lesson_area'] && $_GET['lesson_area'] == '45' ) echo ' selected';?>>宮崎県</option>
       <option value="46" <?php if( $_GET['lesson_area'] && $_GET['lesson_area'] == '46' ) echo ' selected';?>>鹿児島県</option>
       <option value="47" <?php if( $_GET['lesson_area'] && $_GET['lesson_area'] == '47' ) echo ' selected';?>>沖縄県</option>
      </select>
     </div>

     <div class="searchSelectForm">
      <select name="lesson_date">
       <option value="">開催日</option>
       <option value="1" <?php if( $_GET['lesson_date'] && $_GET['lesson_date'] == '1' ) echo ' selected';?>>直近１ヶ月以内</option>
       <option value="2" <?php if( $_GET['lesson_date'] && $_GET['lesson_date'] == '2' ) echo ' selected';?>>１ヶ月以降</option>
      </select>
     </div>

     <div class="selectFormButton">
      <input type="submit" name="" value="検索する">
     </div>

    </form>
   </div>
  </div>



 </div>
</main>

<?php get_footer(); ?>
コード

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

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

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

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

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

guest

回答1件

0

ベストアンサー

changeメソッド外で、別途記述することで解決いたしました。

$('#lessontype').on('change', function () {
  const selected = $('#lessontype').val();
  if( selected == 1 ){
    $('#prefecture').prop('disabled', true);
    $("#prefecture").val(0);
  } else {
    $('#prefecture').prop('disabled', false);
  }
});


const selected = $('#lessontype').val();
if( selected == 1 ){
  $('#prefecture').prop('disabled', true);
  $("#prefecture").val(0);
}
コード

投稿2021/11/24 13:18

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.46%

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

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

質問する

関連した質問

トップHTML5に関する質問

【jQuely】HTMLのoptionタグで選択したものによって、条件分岐を発生させる。